如何在点击动画中制作一系列动画?

时间:2013-03-28 22:31:08

标签: jquery

我有一系列元素,我想在点击时逐个动画。第一个是动画,但下一个不会。我在这里缺少什么?

DEMO

$(document).ready(function() {
    $('.button').click(function() {  
        $('.slide').next().animate({"top" : "5000"}, 500);
    })   
});

3 个答案:

答案 0 :(得分:1)

你可以尝试这个 - DEMO

$(document).ready(function(){
    var i = $(".slide").length;

    $('.button').click(function() {  
        i--;
        $('.slide').eq(i).animate({"top" : "5000"}, 500);
    })
});

答案 1 :(得分:0)

你的选择器没有按照你的想法行事。

$('.slide').next().animate({"top" : "5000"}, 500);

$('.slide')这是在课堂幻灯片中选择所有元素。这意味着它正在选择“滑蓝”,“滑红”,“滑黄”和“滑黑”。

$('.slide').next()这会占用您选择的所有幻灯片的下一个兄弟(如果有的话),即“幻灯片蓝色”,“幻灯片红色”和“幻灯片黄色”。

你的动画作用于蓝色,红色和黄色,顶部只留下黑色。

后续按钮不执行任何操作,因为黑色没有留下兄弟姐妹。

答案 2 :(得分:0)

这样做:

为所有元素添加一个up类(只是将它们标记为up),然后使用以下代码:

$(document).ready(function(){



    $('.button').click(function(){  
        var slide = $('.slide.up').last();
        slide.toggleClass('up');
        slide.animate({"top" : "5000"}, 500);
    })

});

经过测试,它可以按照预期在你的jsFiddle上运行