Question

我正在尝试使用jquery ui让图像反弹进出div。我将所有图像加载到隐藏的div中。我有一个递归jquery函数，在无限循环中的单独div中显示图像。我想添加图像弹跳然后输出的效果。

目前我有：

jQuery(document).ready(function(){

var imgarray = jQuery('img','#hide');

(function recurse(counter) {
    var imgobj = imgarray[counter];
    jQuery('.slides_container img').remove();
    jQuery('.slides_container').delay('1200').prepend(
        '<img id="theImg" src="' + imgarray[counter].src + '" />'
    );
    delete imgarray[counter];
    imgarray.push(imgobj);
    setTimeout(function() {
        recurse(counter + 1);
    }, 2000);
})(0);

});

和

<div id="hide">
     <img src="example1.png" />
     <img src="example2.png" />
</div>

<div class="slides_container"></div>

如何添加弹跳效果？

Answer 1

你非常接近你使用延迟没有做任何事情因为jquery正在执行下一个代码块并删除该图像才能转换出来。你有几个方法可以解决这个问题。

将剩下的动画包裹在动画中，如下所示： http://jsfiddle.net/32cxA/22/

setTimeout(function() {
    jQuery('.slides_container img').animate({
        top: '-=700'
    }, 1500, 'easeInBounce');
    delete imgarray[counter];
    imgarray.push(imgobj);
    setTimeout(function() {
        recurse(counter + 1);
    }, 2000);
}, 2000);

或者保留.delay（）并将其余代码包装在一个等于总转换时间的setTimeout中，如： http://jsfiddle.net/32cxA/25/

jQuery('.slides_container img').animate({
        top: '+=700'
    }, 1200, 'easeOutBounce').delay(2000).animate({
            top: '-=700'
        }, 1500, 'easeInBounce');
    setTimeout(function() {
        delete imgarray[counter];
        imgarray.push(imgobj);
        setTimeout(function() {
            recurse(counter + 1);
        }, 2000);
    }, 4700);

Answer 2

我已经更新了一些代码，它可能不是你想要的，但我没有使用数组来编号你想要的数字，我使用了模数符号（%）来得到元素的数字，然后我使用一个递增的整数（如果你需要更多的控制，你也可以使用for循环。）

这是我的代码，你可以随意使用它。

$(document).ready(function(){
    var numBalls = $('#hidden img').length; //Find out how many images are in queue.
    i = 0; //Start a counter
    setInterval(function(){ //Every (3000) ms run this action
        i++; //Up the counter by 1
        $('img:nth-of-type(' + (i%numBalls + 1) + ')').animate({top: '+=700'}, 1000, 'easeOutBounce').delay(1000).animate({top: '-=700'}, 1000, 'easeOutBounce') //animate the image.  The correct image is selected by (i%numBalls+1)
    },3000);
});

如果你必须使用数组计数，我可以解决这个问题，但这里有一个小提示来展示我相信你正在寻找的东西。看看这里的评论以及解释发生的事情。

http://jsfiddle.net/wxBck/

此外，通过使用您的代码，我编辑了您的小提琴：

http://jsfiddle.net/32cxA/27/

我在两个动画之间添加了一个延迟，如果您尝试这个，可能没有看到这个有用，因为你的setTimeout延迟比整个动画短

添加jQuery UI弹跳效果

2 个答案: