Question

我目前正在使用此代码

$(document).ready(function () {

    var $backgroundimages = ['img1', 'img2', 'img3', 'img4', 'img5'];
    var $backgroundcount = 0;

    function fade($ele) {
        $ele.css('background-image', 'url('+$backgroundimages[$backgroundcount]+')');
        $backgroundcount++;
        $ele.fadeIn(3500).delay(600).fadeOut(800, function () {
            if ($backgroundcount >= $backgroundimages.length) {
                $backgroundcount = 0;
            };
            fade($ele);
        });
    };

    fade($('#stretchParent  .HomeImage').first());

});

使用此代码，我可以淡入/淡出背景图像。有没有办法在到达最后一张图像时停止动画（并保留最后一张图像）？我认为.stop应该可行，但我无法弄明白。

最好的问候

Answer 1

在fade块中添加递归else调用：

$(document).ready(function () {
   var $backgroundimages = ['img1', 'img2', 'img3', 'img4', 'img5'];
   var $backgroundcount = 0;
   function fade($ele) {
       $ele.css('background-image', 'url('+$backgroundimages[$backgroundcount]+')');
       $backgroundcount++;
       $ele.fadeIn(3500).delay(600).fadeOut(800, function () {
           if ($backgroundcount >= $backgroundimages.length) {
            $backgroundcount = 0;
           } else {
               fade($ele);
           }
       });
   };
   fade($('#stretchParent  .HomeImage').first());
});

jquery动画（背景）

1 个答案: