有没有一种简单的方法可以让两个 jQuery 效果紧随其后？

Posted 2023-05-08

【中文标题】有没有一种简单的方法可以让两个 jQuery 效果紧随其后？

【英文标题】：Is there a simple way to do two jQuery effects right after each other?

【发布时间】：2016-10-25 03:46:27

【问题描述】：

基本上，我有一个要应用highlight 和bounce 效果的div。

如果我只做一个，它工作正常。但是将它们组合起来似乎比我预期的要复杂得多。

我只是尝试这样做：

$('.highlight_on_success').bind("ajax:success", function()$(this).closest('div.social-comment').effect('highlight').effect('bounce'););

但这不起作用，然后我做了一些阅读并尝试像这样使用dequeue()：

$('.highlight_on_success').bind("ajax:success", function()$(this).closest('div.social-comment').effect('highlight').dequeue().effect('bounce'););

但这也没用。

我最终偶然发现了 this answer on SO 类似的东西，但感觉 WAAAAAAYYY 太沉重了。

有没有一种更简单、更原生、更少hacky的方法来实现我想要做的事情？

【问题讨论】：

你能描述一下“没用”吗？ ，创建stacksn-ps来演示？

CSS3 过渡可以代替 highlight 如果它们不能很好地配合使用。实际上对这两种效果都有效，您只需要切换一个类

【参考方案1】：

您可以向effect()提供函数回调：

$('.highlight_on_success').bind("ajax:success", function () 
    var obj = $(this).closest('div.social-comment');
    obj.closest('div.social-comment').effect('highlight', function() 
        obj.effect('bounce');
    );
);

【讨论】：

这仍然不会使对象反弹。亮点工作，它只是不反弹。想法？

【参考方案2】：

AJAX成功函数可以这样使用：

var xhr = $.ajax(
    type: 'post',
     url: 'ajax_processor_file.php',
    data: varName : varValue
);

xhr.done(function()
    $('.highlight_on_success')
        .closest('div.social-comment')
        .addClass('highlightMyDiv')
        .effect( "bounce", times:3, 300, function()
            $(this).removeClass('highlightMyDiv');
        );
);

或者只是：

var xhr = $.ajax(
    type: 'post',
     url: 'ajax_processor_file.php',
    data: varName : varValue
)
.done(function()
    $('.highlight_on_success')
        .closest('div.social-comment')
        .addClass('highlightMyDiv')
        .effect( "bounce", times:3, 300, function()
            $(this).removeClass('highlightMyDiv');
        );
);

$('button').click(function()
    $('.social-comment')
        .addClass('highlightMyDiv')
        .effect( "bounce", times:3, 300, function()
          $(this).removeClass('highlightMyDiv');
    );
);

.highlightMyDivbackground:wheat;border:1px solid orange;color:brown;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div class="social-comment">
  The social comment div
</div>
<button>Simulate AJAX Callback</button>

---

注意事项：

(1) .effect() 方法是 jQueryUI 的一部分，因此必须引用/包含该库。

(2) 您可以使用addClass 和链式jQuery 方法添加CSS。

(3)以上代码没有劫持AJAX功能；这是编写 ajax 例程的最佳实践方法，as per the jQuery API docs。

(4) 在前人的回答中，可能是因为没有包含jQueryUI库，所以DIV没有弹跳？请注意，.effect() 不是 jQuery 的一部分，它是 jQueryUI 的一部分 - 但您也可以load just the effects plugin individually。

(5) 请注意，从 jQuery 1.7 开始，.bind() 已被弃用，取而代之的是 .on()（语法几乎相同）。

【讨论】：

不手动劫持.ajax函数就没有办法吗？