jQuery 循环同时淡入淡出

Question

我在使用 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  
};

非常感谢任何帮助！

Answer 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 中。

Answer 2

这最终是由于在 标记之间插入了一些
造成的，并且脚本也在所有标记之间淡入/淡出这些内容。图像

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

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

不是在单独的行中，

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

Drupal 似乎在每个单独的行之间插入
。不确定其他 CMS 是否也会这样做