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

您的脚本看起来正确，我看不出它应该闪烁的任何原因。但是你能试试下面的脚本吗？添加 e.preventDefault();

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

Answer 2

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

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

例如：

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

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