jQuery周期同时衰落

Question

我在使用jQuery Cycle Lite插件(http://jquery.malsup.com/cycle/)时遇到问题

图像似乎在淡入之前完全淡出，我希望它们同时淡入/淡出。http://hardingandwhitlock.com/v6/content/background

我将sync选项设置为1

$.fn.cycle.defaults = {
     timeout:       2000, 
     speed:         200, 
     next:          null, 
     prev:          null, 
     before:        null, 
     after:         null, 
     height:       'auto',
     sync:          1,    
     fit:           0,    
     pause:         0,    
     delay:         0,    
     slideExpr:     null  
};

任何帮助都是非常感谢的！

Answer 1

这听起来像是你在尝试从一个图像到另一个图像的交叉淡入淡出过渡。为此，您需要使用两个图像：

<img id="backImg" />
<img id="frontImg" />

将#backImg设置为在#frontImg之后，如下所示：

#backImg
{
    position: absolute;
}

然后fadeOut正面图像..。这将自动产生交叉淡入淡出效果，因为背景图像已经加载到它后面了。淡入淡出后，将前图像的源设置为后图像的src，显示它，并将下一个图像预加载到后图像中：

function transitionImages(preloadImgUrl)
{
    $("#frontImg").fadeOut("slow", function()
    {
        $("#frontImg").attr("src", $("#backImg").attr("src")).show();
        $("#backImg").attr("src", preloadImgUrl);
    }
}

这一切都假设您的图像大小相同。如果不是这样，那么您只需要对css做得更精细一点，并将图像包装在淡出的div中即可。

Answer 2

这最终是由于在<img>标记之间插入了一些<br>，并且脚本也在所有图像之间淡入/淡出

该站点是用Drupal完成的，因此图像应该插入到主体中，如下所示

<div id="slideshow"><img src="" /><img src="" />...</div>

而不是在单独的行上

<div id="slideshow">
   <img src="" />
   <img src="" />
</div>

Drupal似乎在每一行之间插入了<br>。不确定其他CMS是否也会这样做