有可能同时在两个不同的元素上运行两个动画吗?我需要这个问题的反面Jquery排队动画。

我需要做这样的事情……

$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);

但要同时处理这两件事。我能想到的唯一方法是为每个动画使用一次setTimeout,但我不认为这是最好的解决方案。


当前回答

虽然连续调用动画会让它们看起来是同时运行的,但潜在的真相是它们是非常接近并行运行的不同动画。

为了确保动画确实在同一时间运行,使用:

$(function() {
    $('#first').animate({..., queue: 'my-animation'});
    $('#second').animate({..., queue: 'my-animation'});
    $('#first,#second').dequeue('my-animation');
});

进一步的动画可以添加到'my-animation'队列中,所有的动画都可以被初始化,只要最后一个动画从队列中出来。

欢呼, 安东尼

其他回答

如果您按原样运行上述程序,它们看起来将同时运行。

下面是一些测试代码:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function () {
    $('#first').animate({ width: 200 }, 200);
    $('#second').animate({ width: 600 }, 200);
});
</script>
<div id="first" style="border:1px solid black; height:50px; width:50px"></div>
<div id="second" style="border:1px solid black; height:50px; width:50px"></div>

发布我的答案是为了帮助别人,排名最高的答案并没有解决我的疑虑。

当我实现以下[从顶部的答案]时,我的垂直滚动动画只是来回抖动:

$(function () {
 $("#first").animate({
   width: '200px'
}, { duration: 200, queue: false });

$("#second").animate({
   width: '600px'
}, { duration: 200, queue: false });
});

我提到:W3学校设置间隔,它解决了我的问题,即“语法”部分:

setInterval(函数,毫秒,param1, param2,…)

将我的形式为{duration: 200, queue: false}的参数强制设置为零的持续时间,它只查看参数进行指导。

长和短,这是我的代码,如果你想了解它为什么工作,阅读链接或分析区间预期参数:

var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;

function configureRepeats() {
   window.setInterval(function () {
       autoScroll($scrollDiv, $scrollSpeed);
   }, $interval, { queue: false });
};

其中'autoScroll'是:

    $($scrollDiv).animate({
        scrollTop: $($scrollDiv).get(0).scrollHeight
    }, { duration: $scrollSpeed });

    //Scroll to top immediately 
    $($scrollDiv).animate({
        scrollTop: 0
    }, 0);

编码快乐!

我相信我在jQuery文档中找到了解决方案:

动画所有段落为左样式 50度,不透明度为1(不透明, 可见),完成动画 在500毫秒之内。它也会 在队列外做,意思是吗 将自动启动 等待轮到它。 $("p").animate({ 左:“50px”,不透明度:1 }, {duration: 500, queue: false});

只需添加:queue: false。

虽然连续调用动画会让它们看起来是同时运行的,但潜在的真相是它们是非常接近并行运行的不同动画。

为了确保动画确实在同一时间运行,使用:

$(function() {
    $('#first').animate({..., queue: 'my-animation'});
    $('#second').animate({..., queue: 'my-animation'});
    $('#first,#second').dequeue('my-animation');
});

进一步的动画可以添加到'my-animation'队列中,所有的动画都可以被初始化,只要最后一个动画从队列中出来。

欢呼, 安东尼

是的,有!

$(function () {
    $("#first").animate({
       width: '200px'
    }, { duration: 200, queue: false });

    $("#second").animate({
       width: '600px'
    }, { duration: 200, queue: false });
});