并行 jQuery 效果

发布于 2024-12-21 22:06:07 字数 381 浏览 4 评论 0原文

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

到目前为止我的代码：

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

我知道这两种效果都是依次执行的。是否可以实现并行效果执行？

原文

I want to execute two effects in parallel. A jQuery UI "transfer" animation and a "fadeIn" on another element. They should begin and end at the same time.

My code so far:

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

I understand that both effects are executed one after another. Is it possible to achieve parallel effect execution?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情话难免假 2024-12-28 22:06:07

您在效果的“回调”中具有 fadeIn 函数。仅在动画完成后才会触发/运行回调。这应该可以帮助你..

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

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

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

});

You had the fadeIn function in the "callback" of the effect. The callback is triggered/run only after the animation has finished. This should help you out..

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

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

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

});

回复收藏 0 原文

墟烟 2024-12-28 22:06:07

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

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

回复收藏 0 原文

情话墙 2024-12-28 22:06:07

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

回复收藏 0 原文

小猫一只 2024-12-28 22:06:07

两个并行运行两个动画，即同时使用 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});
});

Two run the two animations in parallel i.e. simultaneously use queue : false and don't put the second animation in the callback function of the first one like this:

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

回复收藏 0 原文

~没有更多了~