2010-11-09 12 views
7

Betrachten Sie den folgenden Code-Schnipsel:jQuery Highlight-Effekt vor remove()

$('.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(); 
... 

Ich mag würde die tatsächliche Zeile markieren, bevor (.remove()) es Wegwerfen. Wenn ich den Artikel nicht .remove() mache, markieren Sie arbeiten.

Wie kann ich zuerst markieren, dann Element entfernen?

+2

siehe hier: http://stackoverflow.com/questions/510761/jquery-delete-dom-element-after-fading-out – mamoo

Antwort

16

Sie die Callback-Funktionalität von effect verwenden können und fadeOut Aktionen zu tun, wenn die erste Aktion abgeschlossen ist:

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

Dies sagt " Markieren Sie _item. Wenn dies abgeschlossen ist, blenden Sie es aus. Wenn das fertig ist, entfernen Sie es. "

+0

Vielen Dank für die detaillierte Erklärung. – fabrik

+0

Sie brauchen den Callback zu '.effect()' nicht. Das '.fadeOut()' wird automatisch in die Warteschlange gestellt, um nach '.effect()' zu laufen. – user113716

+0

@patrick Danke für die Klärung - ich werde manchmal von der jQuery-Warteschlange verwirrt ... – lonesomeday

0

Sie müssen die .remove Warteschlange()

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

Yo ushould einen Rückruf auf dem fadeOut übertragen können:

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

Hoffnung, das hilft.