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;
}

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

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

这一切都假设您的图像大小相同。如果没有，你会想要用css更精细一些，并将图像包装在淡出的div中。

Answer 2

这最终是由于在<br>标记之间插入了一些<img>而导致脚本在所有图像之间输入/输出淡出

该网站正在Drupal中完成，因此图像应该作为

插入到身体中

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

而不是单独的行

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

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

jQuery循环同时淡出

2 个答案: