it-swarm.com.de

jQuery css Sichtbarkeit mit Animation

Ich habe einige Divs untereinander platziert und verwende CSS-Sichtbarkeit, um sie ein- und auszublenden. Der Grund, warum ich Sichtbarkeit benutze, ist, dass die Divs sich nicht bewegen.

Zum Einblenden verwende ich:

$('.drop1').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0});

und zum Ausblenden benutze ich:

$('.drop1').css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 1.0})}, 200);

Das FadeIn funktioniert, aber das FadeOut funktioniert nicht.

Nun können Sie denken, dass das Problem das letzte ', 2' ist, aber ich werde es als Verzögerung seit dem Ausblenden/der Sichtbarkeit verwenden müssen: hidden ist nach 200 ms auf Maus-Blatt-Ereignis.

Meine Frage lautet also: Wie kann ich die Sichtbarkeit, die mit Animationen verborgen wird, als FadeOut verwenden?.

Vielen Dank

51
jQuerybeast

$('.drop1').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);

67
Blazemonger

warum es so schwierig machen, anstatt das CSS zu animieren, können Sie die Standard-Fade-Funktionalität verwenden

$('.drop1').fadeIn(200);
$('.drop1').fadeOut(200);

edit

wenn Sie es jedoch ausblenden möchten, ohne die Höhe zu verlieren. Sie können fadeTo (Dauer, Deckkraft, [Rückruf]); verwenden

$('.drop1').fadeTo(200, 0);

überprüfen Sie dieses Beispiel: http://jsfiddle.net/ufLwy/1/

59
Sander

Ich hatte ähnliche Probleme und hier ist, was ich getan habe.

$.fadeToHidden = function ( selector, duration, complete ) {
    $.when(
        $( selector ).fadeTo( duration, 0 )
    ).done( function(){
        $( selector ).css('visibility', 'hidden')
        complete();
    });
}

Der Grund, warum ich das getan habe, ist der

  1. fadeIn ()/fadeOut () verwendet 'display', wobei F die Höhe eines Elements erhöht
  2. fadeTo hat keinen Einfluss auf die Sichtbarkeit. Während das Element mit Deckkraft: visuell ausgeblendet wird, können Benutzer das unsichtbare Element weiterhin interagieren (d. h. darauf klicken)
  3. animate () ist asynchron, so dass das Verketten von CSS am Ende nicht garantiert, dass es ausgeführt wird, wenn die Animation abgeschlossen ist. Nur wenn Sie das Deferred-Objekt verwenden, das von Animationen zurückgegeben wird ($ .when ()/$ .done ()), können Sie sicherstellen, dass die CSS nach all Animationen angewendet wird sind abgeschlossen.

BEARBEITEN Alternativ können Sie für jedes einzelne Element die Option "Sichtbarkeit: Versteckt" festlegen, sobald die jeweilige Animation abgeschlossen ist. Dies ist bei der Auswahl größerer Elementgruppen möglicherweise etwas schneller, da Sie das DOM für die Elementgruppe nur einmal abfragen.

$.fadeToHidden = function ( selector, duration, complete ) {
    $.when(
        $( selector ).fadeTo( duration, 0 , function(){ 
            $(this).css('visibility', 'hidden');
        } )
    ).done( complete );
}
7
hypno7oad

Ich hatte ein ähnliches Problem und habe es folgendermaßen gelöst:

Einblenden:

$("#id").css({visibility:"visible", opacity: 0.0}).animate({opacity: 1.0},200);

Ausblenden:

$("#id").animate({opacity: 0.0}, 200, function(){
    $("#"+txtid).css("visibility","hidden");
});

Wie Sie sehen, verstecke ich die div "#id", sobald die Animation beendet ist. Ich hoffe es ist nicht zu spät

Ich weiß, dass dies ein alter Beitrag ist, aber ich bin auf eine ähnliche Situation gestoßen, und das habe ich letztendlich getan

$(".drop1").css("visibility", "visible").show().fadeOut(5000);
0