jQuery使一个又一个充满活力

jQuery animate one another another

本文关键字:充满活力 一个又一个 jQuery      更新时间:2023-09-26

我试图将一个又一个elment动画化,但我在这个上遇到了一些问题

    $.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);
        }
    });

它是有效的,但所有元素都同时有动画,有什么建议吗?

$.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/