0

是否可以以不同的速度为同一对象设置动画并同时开始？

function loop_horiz(direction){
    var d = (direction == 1) ? '+' : '-';
    $('.op').animate({ left: d + '200' },
     4000, function() { loop_horiz(direction * (-1)) });
}

function loop_vert(direction){
    var d = (direction == 1) ? '+' : '-';
    $('.op').animate({ bottom: d + '200' },
    2000, function() { loop_vert(direction * (-1)) });
}

loop_horiz(1);
loop_vert(1)
4

1 回答 1

1

通常，当使用 jQuery 为对象设置动画时，动画会添加到该对象的队列中。当之前的动画结束时，动画开始运行。您上面的代码正是这样做的，先水平动画，然后垂直动画。

此行为可以通过使用动画的 queue 选项来覆盖（将其设置为 false）。

function loop_horiz(direction) {
    var d = (direction == 1) ? '+' : '-';
    $('.op').animate({
        left: d + '200'
    }, {
        queue: false,
        duration: 4000,
        done: function () {
            loop_horiz(direction * (-1))
        }
    });
}

function loop_vert(direction) {
    var d = (direction == 1) ? '+' : '-';
    $('.op').animate({      
        bottom: d + '200'
    }, {
        queue: false,
        duration: 2000,
        done: function () {
            loop_vert(direction * (-1))
        }
    });

}

loop_horiz(1);
loop_vert(1)

另一种（更丑陋）的可能性是合并动画，但它需要您将水平动画分成两部分运行超过 2 秒的一半距离。

http://api.jquery.com/animate/

更好的是，使用队列作为字符串，您可以将动画添加到不同的队列中。与上面相同的代码，但对垂直和水平动画使用不同的队列：

function loop_horiz(direction) {
    var d = (direction == 1) ? '+' : '-';
    $('.op').animate({
        left: d + '200'
    }, {
        queue: 'horizontal',
        duration: 4000,
        done: function () {
            loop_horiz(direction * (-1))
        }
    }).dequeue('horizontal');
}

function loop_vert(direction) {
    var d = (direction == 1) ? '+' : '-';
    $('.op').animate({
        bottom: d + '200'
    }, {
        queue: 'vertical',
        duration: 2000,
        done: function () {
            loop_vert(direction * (-1))
        }
    }).dequeue('vertical');

}

loop_horiz(1);
loop_vert(1)

演示：http: //jsfiddle.net/Uewzc/1/

于 2013-10-29T09:12:16.567 回答