webentwicklung-frage-antwort-db.com.de

Animieren Sie die CSS-Anzeige

Gibt es eine Möglichkeit, die CSS-Anzeigeeigenschaft in jQuery zu animieren? Ich habe folgendes:

$(".maincontent").css("display","block");

und möchte, dass es so etwas tut:

$(".maincontent").animate({"display": "block"}, 2500);
16
danyo

Verwenden Sie einfach .show(), indem Sie einen Parameter übergeben:

$(".maincontent").show(2500);

Bearbeiten (basierend auf Kommentaren) :

Der obige Code wird in dem Element über einen Zeitraum von 2,5 Sekunden eingeblendet. Wenn Sie stattdessen eine Verzögerung von 2,5 Sekunden wünschen und dann das Element anzeigen möchten, verwenden Sie Folgendes:

$(".maincontent").delay(2500).fadeIn();

Wenn Sie natürlich eine Verzögerung und eine längere Überblendung wünschen, geben Sie einfach die gewünschte Millisekunde in jede Methode ein.

22

Sie könnten so etwas tun:

$("div").css({
    "opacity":"0",
    "display":"block",
}).show().animate({opacity:1})

Beispiel: http://jsfiddle.net/charlescarver/g7z6m/

Dies berücksichtigt den display:none, da er immer noch aus dem Seitenfluss entfernt wird, bis der Code aufgerufen wird, wo er angezeigt wird, und die Deckkraft auf 0 gesetzt wird. Wenn Sie den Befehl aufrufen, wird die Deckkraft auf 1 gesetzt Code. 

2
Charlie

Versuchen Sie folgendes (wie ich in den Kommentaren erwähnt habe):

Sie können die .delay()-Methode verwenden. I.E: 

$(".maincontent").delay(2500).show();
1
Shivam

Das Animieren der Deckkraft mit jQuery ist praktikabler als die Anzeigeeigenschaft. Hier wird die Deckkraft von 0 bis 1 in 1 Sekunde animiert:

$(".maincontent").animate({opacity:1},1000)

Dann sollte das CSS so sein:

.maincontent{ 
opacity: 0;
}

Wenn Sie planen, den gesamten Block vor der Transistion auszublenden, haben Sie möglicherweise eine Anzeigeeigenschaft. 

.maincontent{
opacity: 0;
display: none;
}

Dann zeigen Sie den Block mit Animation:

$(".maincontent").show().animate({opacity:1},1000 function(){
  (callback function here)
})

Hoffe das hilft!

0
Ken Seah