Question

我有一个带有大图片的弹出框，里面有一些文字。

它的样式有display:none;，要查看它我使用了jQuery的fadeToggle（）函数。然而，从不可见和可见的滞后过渡到不平滑，不像其他弹出窗口只有纯文本。

我怀疑这可能是因为图像很大，所以我必须以某种方式预加载图像以使过渡平滑吗？

编辑：

这只是一个简单的jQuery弹出窗口：

HTML

<div id="thumb1">
  <img src="thumbnail.png">
<div>    

<div id="popup">
  <img src="#">
  <div>
    <p>Image Description here</p>
  </div>
</div>

CSS

#popup{
    display: none;
    position: fixed;
    top: 30;
    bottom: 30;
    left: 30;
    right: 30;
    z-index: 100;
    background-color: #000;
   }  
#popup .image{
       float: left;
   }
#popup .image img{
       height: 100%;
   }

的jQuery

    $("#thumb1").click( function() {
       $("#popup").fadeToggle();    
       $("#overlay").fadeToggle();
    });

此处是指向用于测试的网站的链接：http://ignitedesign.co.nr/

点击Itz Flipz缩略图，动画不会褪色。

Answer 1

看来你在同一个对象上发生了webkit过渡和jQuery动画。我相信这就是为什么它表现得很奇怪而且看起来很落后。例如，我看到#popup具有CSS过渡动画，并且正在通过jQuery进行动画制作。

您可以采取两项措施来提高效果。

首先，你在两个相互重叠的独立物体中褪色。淡入单个元素应该更有效。如果你可以在叠加层中嵌套弹出窗口，那应该有帮助。

其次，jQuery的动画方法并不是最有效的。一个主要因素是jQuery没有将requestAnimationFrame用于动画。关于最有效的动画方法（http://css-tricks.com/myth-busting-css-animations-vs-javascript/）有很多争论。

最简单的解决方案是使用jQuery Transit（http://ricostacruz.com/jquery.transit/）之类的东西来制作动画。对于旧版浏览器，它具有良好的回退（请参阅网站上的代码段）。它应该有助于提高性能。如果您愿意，可以查看其他Javascript方法。

图像尺寸（2mb）可能在某些设备上有些因素。它确实可以保存为JPEG并节省大量文件。

jQuery的fadeToggle（）动画滞后

1 个答案: