将 .attr 放入另一个方法的函数中会中断 jquery

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 Callback 你需要像 .promise().done(function(){});

一样使用它

jQuery 具有承诺方法，returns 一个您可以使用 .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

Putting .attr inside a function of another method breaks jquery

html

jquery

arraylist

attr