javascript - 如何避免闪烁的 iframe？

Question

<a href="#" id="toggle01">CONTACT</a>

<script>
$('#toggle01').click(function() {
    $('#contact').slideToggle("slow");
    return false;
});
</script>


<div id="contact">
123-456<br />
</div>
<iframe id="player" src="http://www.youtube.com/embed/..."></iframe>

这里一切正常，但是当我点击链接 CONTACT 并且 div#contact 变得可见/不可见时，iframe 闪烁。
我怎样才能避免这种闪烁？

Answer 1

问题似乎是滑动动画。当您的 div 动画时，iframe 向下移动并导致重新呈现。

您可以将您的 div 放在 iframe 之后，或者将它封装在另一个具有固定高度的 div 中。

例如:

<div style="height:50px;">
    <div id="contact">
        123-456<br />
    </div>
</div>

但这会在您的 iframe 上方留下一个空白区域。