jQuery highlight effect before remove()

Question

Consider the following snippet:

$('.remove_item').click(function(e) {
    var _item = $(this).closest('.cart_item');
    if(confirm('Biztosan törölhetem a terméket a kosárból?')) {
        _item.effect('highlight', {}, 100).stop().fadeOut('fast');
        _item.remove();
...

I'd like to highlight the actual row before trashing (.remove()) it. If i don't .remove() the item, highlight working.

How can i highlight first, then remove element?

see here: http://stackoverflow.com/questions/510761/jquery-delete-dom-element-after-fading-out — mamoo, Nov 09 '10 at 13:16

score 17 · Accepted Answer · answered Nov 09 '10 at 13:18

17

You can use the callback functionality of effect and fadeOut to do actions when the first action has finished:

_item.effect('highlight', {}, 100, function(){
    $(this).fadeOut('fast', function(){
        $(this).remove();
    });
});

This says "highlight _item. When this is finished, fade it out. When this is finished, remove it."

answered Nov 09 '10 at 13:18

lonesomeday

233,373
50
316
318

You don't need the callback to `.effect()`. The `.fadeOut()` will be automatically queued to run after `.effect()`. – user113716 Nov 09 '10 at 13:27
@patrick Thanks for the clarification -- I get confused sometimes by the jQuery queue... – lonesomeday Nov 09 '10 at 17:26

score 5 · Answer 2 · answered Nov 09 '10 at 13:18

Yo ushould be able to assign a callback on the fadeOut:

$('.remove_item').click(function(){
    if(confirm('Biztosan törölhetem a terméket a kosárból?'))
    {
         $(this).closest('.cart_item').fadeOut(500, function() { $(this).remove(); });
    }
});

hope this helps.

score 0 · Answer 3 · answered Nov 09 '10 at 13:15

0

You need to queue the .remove()

_item.queue( function() { $(this).remove(); });

answered Nov 09 '10 at 13:15

Simon

4,395
8
33
50

jQuery highlight effect before remove()

3 Answers3