2

我正在尝试使用 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>

如何添加反弹效果？

4

2 回答 2

2

您非常接近您对延迟的使用没有做任何事情，因为 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);
于 2013-05-31T20:45:24.697 回答
1

我已经稍微更新了代码，它可能不是您想要的，但是我没有使用数组来编号，而是使用模数符号 ( %) 来获取元素的编号，然后我使用递增的整数（如果需要更多控制，也可以使用 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 延迟比整个动画短

于 2013-05-31T20:40:15.930 回答