Animer l'affichage CSS
Est-il un moyen d'animer la propriété CSS display en jQuery? J'ai le texte suivant:
$(".maincontent").css("display","block");
et il veut faire quelque chose comme ceci:
$(".maincontent").animate({"display": "block"}, 2500);
source d'informationauteur danyo | 2013-07-25
Vous devez vous connecter pour publier un commentaire.
Suffit d'utiliser
.show()
en passant un paramètre:Modifier (sur la base des observations):
Le code ci-dessus s'estompe dans l'élément sur un 2.5 de la seconde plage. Si au contraire, vous voulez un 2.5 secondes de retard et que vous souhaitez l'élément à l'écran, utilisez les suivantes:
Si, bien sûr, vous voulez un délai et une durée de fondu, il suffit de passer le nombre de millisecondes souhaitée dans chaque méthode.
Vous pourriez faire quelque chose comme ceci:
Exemple: http://jsfiddle.net/charlescarver/g7z6m/
Il prend en compte la
display:none
car il va toujours être retiré de la circulation de la page jusqu'à ce que le code est invoquée, où il affiche, puis définissez l'opacité à 0. Il sera ensuite l'animer de l'opacité à 1 lorsque vous composez le code.Essayer (comme je l'ai mentionné dans les commentaires):
Vous pouvez utiliser
.delay()
méthode. I. E:L'animation de l'opacité à l'aide de jQuery est plus viable que la propriété d'affichage, ici, l'opacité est animé de 0 à 1 en 1 seconde:
Puis le css devrait être comme ceci:
Si vous êtes planification pour masquer l'ensemble du bloc avant de la transistion, vous pourriez avoir une propriété d'affichage.
Alors de montrer le bloc avec animation:
Espérons que cette aide!