Question

我使用以下js来循环一系列图像。正如现在一样，一个动画在最后一个动画完成之前不会开始 - 所以图像淡出，然后新图像渐渐消失。

var j = 0;
var delay = 2000; //millisecond delay between cycles
function cycleThru(){
    var jmax = $("#hero-slides li").length -1;
    $("#hero-slides li:eq(" + j + ")")
        .animate({"opacity" : "1"} ,1000)
        .animate({"opacity" : "1"}, delay)
        .animate({"opacity" : "0"}, 1000, function(){
            (j == jmax) ? j=0 : j++;
            cycleThru();
        });
    };
    cycleThru();

我真的希望淡入淡出同时发生，这个代码有可能吗？

一如既往地谢谢。

Answer 1

将上一个动画的延迟设置为1000而不是2000，这样你就会有重叠的动画，问题是你可能需要将其中一个设置为绝对位置，可能是一个淡出的位置，所以它不要溢出容器。

抱歉，我没有仔细阅读你的代码试试这个

function cycleThru(){
    var jmax = $("#hero-slides li").length -1;
    $("#hero-slides li:eq(" + j + ")")
     .animate({"opacity" : "1"} ,1000,function(){
        (j == jmax) ? j=0 : j++;
        setTimeout(cycleThru,delay);
     })
     .animate({"opacity" : "1"} ,delay
     .animate({"opacity" : "0"}, 1000);
 };
cycleThru();

将调用函数移动到第一个动画完成后，并安排下一个图像在当前图像应该消失的同时出现，应该可以正常工作

如何让图像同时淡入淡出

1 个答案: