Fadein Fadeout Hilfe

Question

Ich kann nicht richtig funktionieren, eigentlich überhaupt. Was ich bisher gemacht habe funktioniert, aber ich möchte eine Nachricht einblenden und dann ausblenden. Nachdem es ausgeblendet ist, möchte ich das div vollständig entfernen.

Kann mir jemand sagen, was ich hier vermisse?

var div = $('<div>').attr('id', 'error').html('Cannot Be Blank'); 
    $('body').append(div); 

Answer 1

var div = $('<div />').attr('id', 'error') 
         .html('Cannot Be Blank') 
         .hide(); 
$('body').append(div); 
$("#error").fadeIn("slow", function() { 
    $(this).fadeOut("slow", function() { 
     $(this).remove(); 
    });  
}); 

Demo: http://jsfiddle.net/karim79/wpxCk/

Um sicherzustellen, dass die fadeout nach der FadeIn geschieht, sollte es innerhalb fadeIn Callback ausgelöst werden. In ähnlicher Weise sollte das Entfernen des Fehler-Div innerhalb des Rückrufs von fadeOut erfolgen. Siehe:

• http://api.jquery.com/fadeIn/
• http://api.jquery.com/fadeOut/
• http://api.jquery.com/remove/

Answer 2

$(div).fadeOut('slow', function() { 
    // Animation complete. 
}); 

    $(div).remove(); 

Fügen Sie diese nach dem aktuellen Code :)

Answer 3

Sie können es wie folgt tun:

$('<div>').attr('id', 'error').html('Cannot Be Blank').appendTo('body') 
      .hide().fadeIn().fadeOut(function() { $(this).remove(); }); 

Wahrscheinlich aber würden Sie wollen eine Klasse hier für Styling verwenden ... es sei denn, es eine ID benötigt, können Sie es weglassen, und in späteren Versionen von jQuery, verkürzen Sie es an:

$('<div>', { html: 'Cannot Be Blank' }).appendTo('body') 
    .hide().fadeIn().fadeOut(function() { $(this).remove(); }); 

Answer 4

So

müßten die jQuery-Funktionen Sie sind wie:

1) .fadeIn ([Dauer], [Rückruf])
2) .fadeOut ([Dauer], [Rückruf])
3) .remove ([Selektor])

bedeutet, dass Sie sie in dieser Reihenfolge verschachteln und als Rückrufe platzieren würden.

errordiv = $("#error"); 
$(errordiv).fadeIn("slow", function(){ 
    $(errordiv).fadeOut("slow", function() { 
     $(errordiv).remove(); 
    }) 
});