Question

下面我发布了一个JSfiddle。我试图使用for循环和数组列表来更改我的Jquery中的图像。出于某种原因，当我只将它放入时，这段代码工作正常：

menuimage.delay(500).attr('src', cars[i]);

但是当我把

menuimage.delay(2000).toggleClass('nopacity', 1000, function(){
  menuimage.delay(500).attr('src', cars[i]);
});
menuimage.delay(500).toggleClass('nopacity', 1000);

图像变化似乎打破了。我不确定为什么会这样。下面我发布了它的JSfiddle。我已经得到了较低的代码来改变我想要正确的图像，当它在数组之外时，但在其他设置中在此功能中设置时拒绝工作。任何帮助和解释将不胜感激。

附加代码

https://jsfiddle.net/nathanahartmann/hnkokka8/3/

没有额外的代码

https://jsfiddle.net/nathanahartmann/2xk7jzd5/1/

Answer 1

使用setInterval代替for循环，并且知道有一个toggleClass回调你需要使用它.promise().done(function(){});

jQuery有promise方法，它返回一个可以使用.promise()访问的延迟对象。在完成所选元素的所有运行动画后，将解析此promise对象。此时，您可以绑定到它的完成方法。

$("document").ready(function(){
var menuimage=$("#menuImage")
var cars = ['http://www.freedigitalphotos.net/images/img/homepage/87357.jpg', 'http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg'];
var i = 0;
  setInterval(function(){
    menuimage.delay(2000).toggleClass('nopacity', 1000).promise().done(function(){
      menuimage.delay(500).attr('src', cars[i]);
    });
    menuimage.delay(500).toggleClass('nopacity', 1000);
    i ++;
    i = i % 2;
  }, 5000)

})

<强> JSFIDDLE

将.attr放在另一个方法的函数中会破坏jquery

1 个答案: