web-dev-qa-db-fra.com

Animer l'affichage CSS

Est-il possible d'animer la propriété d'affichage CSS dans jQuery? J'ai le suivant:

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

et je veux qu'il fasse quelque chose comme ça:

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

Utilisez simplement .show() en lui passant un paramètre:

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

Edit (basé sur les commentaires) :

Le code ci-dessus s'estompe dans l'élément sur une durée de 2,5 secondes. Si, au lieu de cela, vous souhaitez un délai de 2,5 secondes, puis que l'élément soit affiché, utilisez les éléments suivants:

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

Si, bien sûr, vous voulez un retard et un fondu plus long, il suffit de passer le nombre de millisecondes souhaité dans chaque méthode.

22
Derek S. Henderson

Vous pouvez faire quelque chose comme ça:

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

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

Ceci prend en compte le display:none, car il sera toujours supprimé du flux de la page jusqu'à ce que le code soit appelé, où il sera affiché, puis définira son opacité sur 0. Il animera ensuite son opacité sur 1 lorsque vous appelez le code. 

2
Charlie

Essayez ceci (comme je l'ai mentionné dans les commentaires):

Vous pouvez utiliser la méthode .delay(). C'EST À DIRE: 

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

L'animation de l'opacité à l'aide de jQuery est plus viable que la propriété display. L'opacité est ici animée de 0 à 1 en 1 seconde:

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

Alors le css devrait être comme ça:

.maincontent{ 
opacity: 0;
}

Si vous envisagez de masquer le bloc entier avant la transition, vous pouvez avoir une propriété d'affichage. 

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

Ensuite, pour afficher le bloc avec animation:

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

J'espère que cela t'aides!

0
Ken Seah