jQuery Cycle 同时淡入淡出答案

【问题标题】：jQuery Cycle simultaneous fadejQuery Cycle 同时淡入淡出
【发布时间】：2011-06-24 11:44:45
【问题描述】：

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

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

我将同步选项设置为 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  
};

非常感谢任何帮助！

【问题讨论】：

标签： javascript jquery slideshow cycle

【解决方案1】：

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

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

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

#backImg
{
    position: absolute;
}

然后淡出前面的图像...这将自动执行您的交叉淡入淡出效果，因为后面的图像已经加载在它后面。淡入淡出后，将前图的源设置为后图的src，显示出来，并将下一张图预加载到后图中：

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

这一切都假设您的图像大小相同。如果没有，您将希望对 css 进行更精细的处理，并将图像包装在淡出的 div 中。

【讨论】：

我好像明白了，不过谢谢你的建议

【解决方案2】：

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

该站点是在 Drupal 中完成的，因此图像应该插入到正文中

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

而不是单独的行

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

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

【讨论】：