Question

我正在尝试创建一种效果，即在用户点击页面的任何位置显示简短动画。为此，我需要快速将div的背景图像与图像数组交换一次。我在jquery中使用animate()或fadeOut()方法无法找到方法，所以我尝试使用setTimeout()，但都是徒劳的。请引导我找到我想要做的最佳技巧。

JSFiddle

P.S：我在帖子中包含JSFiddle链接时遇到问题，所以我会留给其他人进行编辑。虽然对此的解释会有很大帮助。

Answer 1

这应该有效：

    var imgc;
var images = Array("http://s11.postimg.org/8iznatxr3/image.png",
               "http://s11.postimg.org/g08uq1na7/image.png",
               "http://s11.postimg.org/hgkd86q73/image.png",
               "http://s11.postimg.org/5fyx7gisf/image.png",
               "http://s11.postimg.org/3pfw5z19b/image.png");
$(document).click(function(e){

    imgc = -1;

    $('#ball').show().css({left:e.pageX +'px',top:e.pageY+'px'});

    setImage();


});

function setImage() {

    imgc++;

    var newimage = images[imgc];

    if (imgc < 5)  {
    $('#ball').fadeOut(50).css("background-image", "url("+newimage+")").fadeIn(50);

    setTimeout(setImage, 100);
    }
}

JSFiddle

请注意，我已将animate()替换为fadeIn()和fadeOut()。

Jquery创建动画交换div中的一系列图像

1 个答案: