Question

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

如果我只做一个，它可以正常工作。但结合它们似乎比我预期的要复杂得多。

我试着这样做：

$('.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类似的东西，但感觉WAAAAAYYY太重了。

是否有更简单，更原生，更少hacky的方法来实现我想要做的事情？

Answer 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');
    });
});

Answer 2

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

for (int t = 1; t <= 12; t++)
{
    DateTime bleh = DateTime.Now.AddMonths(t);
    string blah = (bleh.ToString("MMMM"));
    Literal4.Text += blah + t + "<br/>";
}

或只是：

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');
        });
});

＆＃13;

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');
        });
});

＆＃13;

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

＆＃13;

.highlightMyDiv{background:wheat;border:1px solid orange;color:brown;}

＆＃13;

注意：

（1）<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>方法是jQueryUI的一部分，因此必须引用/包含该库。

（2）您可以使用.effect()和链式jQuery方法添加CSS。

（3）上面的代码没有劫持AJAX函数;它是编写ajax例程的最佳实践方法，as per the jQuery API docs。

（4）在上一个人的回答中，也许DIV没有弹跳，因为jQueryUI库没有包含在内？请注意，addClass不是jQuery的一部分，它是jQueryUI的一部分 - 但您也可以load just the effects plugin individually。

（5）请注意，自{jQuery 1.7}起，.effect()已弃用.bind()（实际上语法相同）。

有一种简单的方法可以在彼此之后立即执行两个jQuery效果吗？

2 个答案: