并行 jQuery 效果答案

【问题标题】：Parallel jQuery effects并行 jQuery 效果
【发布时间】：2011-12-18 13:55:19
【问题描述】：

我想并行执行两个效果。 jQuery UI“转移”动画和另一个元素上的“淡入”。它们应该同时开始和结束。

到目前为止我的代码：

    $('#foo').hover(function() {
        $(this).effect("transfer", {
            to: "#transition-target",
            className: "ui-effects-transfer"
        }, 300, function() {
            $('#bar').fadeIn(300);
        });
    });

我知道这两种效果都是一个接一个地执行。是否可以实现并行效果执行？

【问题讨论】：

标签： javascript jquery jquery-ui queue effects

【解决方案1】：

您在效果的“回调”中有淡入淡出功能。回调仅在动画完成后触发/运行。这应该可以帮助你..

$('#foo').hover(function() {

    $(this).effect("transfer", {
        to: "#transition-target",
        className: "ui-effects-transfer"
    }, 300);

    $('#bar').fadeIn(300);

});

【讨论】：

【解决方案2】：

 $('#foo').hover(function() {
$('#bar').fadeIn(300);
        $(this).effect("transfer", {
            to: "#transition-target",
            className: "ui-effects-transfer"
        }, 300  );
    });

【讨论】：

【解决方案3】：

您可以使用 animate 进行 2 个或更多并行效果。

【讨论】：

【解决方案4】：

两个动画并行运行，即同时使用queue : false，不要像这样将第二个动画放在第一个的回调函数中：

$('#foo').hover(function() {
    $(this).effect("transfer", {
        to: "#transition-target",
        className: "ui-effects-transfer"
    }, { duration:300, queue: false});
    $('#bar').fadeIn({ duration: 300, queue: false});
});

【讨论】：