1

我有一系列元素,我想在点击时一个一个地制作动画。第一个动画,但下一个不会。我在这里想念什么?

演示

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

3 回答 3

1

你可以试试这个 - DEMO

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

    $('.button').click(function() {  
        i--;
        $('.slide').eq(i).animate({"top" : "5000"}, 500);
    })
});
于 2013-03-28T22:44:29.207 回答
0

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

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

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

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

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

随后的按钮按下什么也不做,因为黑色没有兄弟姐妹。

于 2013-03-28T22:40:18.097 回答
0

做这个:

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

$(document).ready(function(){



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

});

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

于 2013-03-28T22:43:08.983 回答