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="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的动画

1 个答案: