用几个 div 循环制作动画

Question

我有一个工作动画 jquery 脚本在这里：jsfiddle

var speed = 1500;
var margin = 50;
var start = 200;
var next = 1400;

setTimeout(function() {
    $("#foo").show().animate({
        // marginLeft: startPoint,
        marginLeft: margin // endPoint
    }, speed);
},start + next * 0);
setTimeout(function() {
    $("#bar").show().animate({
        // marginLeft: startPoint,
        marginLeft: margin // endPoint
    }, speed);
},start + next * 1);
setTimeout(function() {
    $("#foobar").show().animate({
        // marginLeft: startPoint,
        marginLeft: margin // endPoint
    }, speed);
},start + next * 2);

我想将所有 div id 更改为类，然后运行在 jquery 中循环 - 类似于：animating-several-divs-in-a-sequence .

$(function () {
    function show() {
        $('.project_box:not(.completed):first').show(500, function () {
            $(this).addClass('completed');
            show();
        });
    }

    show();
});

我还想运行从 body-tag ("startPoint") 外部播放动画并使其在当前 "endPoint".

处结束

非常感谢任何帮助！

注意：请记住，我是 jQuery 的新手，英语不是我的母语。 :-)

Answer 1

这里假设您将 class 命名为 class="test"。你可以这样做：

$(document).ready(function(){ 
    var speed = 1500;
    var margin = 50;
    var start = 200;
    var next = 1400;
    $('.test').each(function(index,element){
        setTimeout(function() {
        $(element).show().animate({
            // marginLeft: startPoint,
            marginLeft: margin // endPoint
            }, speed);
        },start + next * index);
    });


});

看这里：http://jsfiddle.net/w7o0vezs/

用几个 div 循环制作动画

Make animation with several div's in a loop

javascript

jquery

animation

sequence