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上方留下一个空白区域。

如何避免iframe闪烁？

2 个答案: