jQuery互为动画另一个

时间:2012-09-08 11:11:01

标签: javascript jquery json jquery-animate

我试图激活一个接一个的元素,但我有一些麻烦这个

    $.getJSON('http://localhost/json/example/json.json', function(data){
        var ele = jsonElements(data);
        for(var i = 1; i <= ele; i++)
        {
            $('#test').append('<a href="#" id="t_'+i+'" class="block-icon"></a>');
            $('#t_'+i).animate({
                'top': data['t_'+i]['top'],
                'left': data['t_'+i]['left']
                }, 800).delay(1000);
        }

    });

它有效,但所有元素都同时有动画,任何建议如何一个接一个地制作它?

1 个答案:

答案 0 :(得分:0)

$.getJSON('http://localhost/json/example/json.json', function(data){
        var ele = jsonElements(data);
        one_by_one(ele,1);
    });

function one_by_one(ele,i){
if(i > ele)
return;

$('#test').append('<a href="#" id="t_'+i+'" class="block-icon"></a>');
$('#t_'+i).animate({
                'top': data['t_'+i]['top'],
                'left': data['t_'+i]['left']
                }, 1000, function() {
    // Animation complete
    one_by_one(ele,i+1);
  });

}

调用one_by_one(i);

我在http://jsfiddle.net/VS8tQ/64/

上添加了一个示例