javascript - 使用 jQuery 通过更改 src 属性对一个图像标签进行动画处理

Question

我有一个应用程序，其中一个分区包含一张需要每三秒更改一次的图像。但问题是我还需要为该变化事件添加一些动画。我尝试了一些东西，但那些看起来不太令人愉快。有什么办法可以对此使用 animate() 吗？我的代码仅更改图像如下:

var arrayOfImages //asssume that this array have 10 images   
  var i = 0;  
  setInterval(function(){
  $('.imageBox').attr('src', arrayImg[i]); 
  i++; 
  if(i == 10) i=0; 
  }, 3000);

除此之外，我也尝试过 fadeIn 和 fadeOut，但这看起来也很天真。

var i = 0;
    setInterval(function(){
        $('.imageBox').fadeOut(500, function() {
            $('.imageBox').attr("src",arrayImg[++i]);
            $('.imageBox').fadeIn(500);
        });
      if(i == 10) i=0; 
      }, 3000);

请对此提供任何帮助。先感谢您 这是 fiddle 的链接 http://jsfiddle.net/apf5X/8/

Answer 1

你试过吗jQuery Cycle 2 ？

这是一个非常强大的插件，有很多动画。不仅适用于图像，还适用于任何 html 标签!