Is there a simple way to do two jQuery effects right after each other?

Question

Basically, I have a div that I want to apply a highlight and bounce effect to.

If I do just one, it works fine. But combining them seems to be much more tricky than I expected.

I tried to do simply this:

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

But that didn't work, then I did some reading and I tried using dequeue() like so:

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

But that too didn't work.

I eventually stumbled across this answer on SO about something similar, but that feels WAAAAAYYY too heavy.

Is there a simpler, more native, less hacky, way to achieve what I am trying to do?

Can you describe _"didn't work"_? , create stacksnippets to demonstrate? — guest271314, Jun 23 '16 at 01:44
CSS3 transitions would work instead of `highlight` if they don't play well together. Actually would work for both effects and all you would need is toggle a class — charlietfl, Jun 23 '16 at 01:45

FuriousD · Answer 1 · 2016-06-23T02:57:19.487

2

You can provide a function callback to 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');
    });
});

edited Jun 23 '16 at 02:57

answered Jun 23 '16 at 01:55

FuriousD

844
5
16

This still doesn't make the object bounce. The highlight works, it just doesn't bounce. Thoughts? – marcamillion Jun 24 '16 at 05:48

cssyphus · Answer 2 · 2016-06-24T13:13:21.673

The AJAX success function can be used like this:

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

or just:

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

.highlightMyDiv{background: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>

Notes:

(1) The .effect() method is part of jQueryUI, so that library must be referenced/included.

(2) You can add the CSS using addClass and chain jQuery methods as above.

(3) Above code is not hijacking the AJAX function; it is the best practices methodology for writing an ajax routine, as per the jQuery API docs.

(4) In the previous person's answer, perhaps the DIV is not bouncing because the jQueryUI library is not included? Note that .effect() is not part of jQuery, it is part of jQueryUI - but you can also load just the effects plugin individually.

(5) Note that .bind() has been deprecated as of jQuery 1.7 in favor of .on() (virtually the same syntax).

Is there no way to do that without manually hijacking the `.ajax` function? — marcamillion, Jun 24 '16 at 05:48

Is there a simple way to do two jQuery effects right after each other?

2 Answers2