Comment faire glisser un div puis .fadeIn () le contenu et vice versa?

Cela fonctionnera:

HTML:

toggle 
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tortor erat, et consectetur nisl. Nunc non placerat odio. Cras feugiat pulvinar diam sed sollicitudin. Quisque ut elit lacus, et gravida nunc. Maecenas ac enim ligula. Aenean felis nunc, vulputate pellentesque vehicula nec, sortingstique a tortor. Curabitur et semper dui. Sed id nisl turpis. Sed vel nunc et nisi laoreet feugiat. Sed lobortis enim sed arcu tempor vehicula. Vivamus dui ligula, ulsortingcies id egestas ut, rhoncus et est. Pellentesque dignissim diam vel nibh tempus condimentum. Etiam sodales fermentum pharetra. Etiam faucibus tempus malesuada. Mauris nulla lectus, laoreet sit amet cursus vel, ulsortingcies at enim. Sed facilisis rutrum eros, nec malesuada eros iaculis ac. 

 In consectetur faucibus fermentum. Pellentesque habitant morbi sortingstique senectus et netus et malesuada fames ac turpis egestas. Cras nunc magna, vestibulum eget pulvinar hendrerit, tincidunt id arcu. Nullam dolor ligula, suscipit placerat condimentum ac, feugiat ut mauris. Suspendisse semper dolor condimentum dui ornare rhoncus. In bibendum massa vel erat sortingstique congue. Donec vel mi quam, ac iaculis odio. Nulla interdum orci quis ligula aliquam viverra. Nam eget egestas mauris. Sed in massa quis erat venenatis aliquam. 
  

Javascript:

 function toggleSlider() { if ($("#panelThatSlides").is(":visible")) { $("#contentThatFades").animate( { opacity: "0" }, 600, function(){ $("#panelThatSlides").slideUp(); } ); } else { $("#panelThatSlides").slideDown(600, function(){ $("#contentThatFades").animate( { opacity: "1" }, 600 ); }); } } 

Exemple de travail sur JS Fiddle .

Pour IE, assurez-vous qu’il y a une couleur d’arrière-plan derrière le contenu de cleartype.

Comme vous voulez que les deux opérations se déroulent simultanément, vous devez utiliser la fonction animate . Sinon, les actions viendront les unes après les autres.

Si vous connaissez la hauteur de l’élément avant de l’exécuter, vous pouvez régler les choses assez facilement. Voici un exemple extrêmement approximatif: http://jsfiddle.net/tArQu/

 $("#button").toggle(function(){ $("#content").slideDown().fadeIn(); }, function(){ $("#content").slideUp().fadeOut(); return false; }); 

C’est ce que tu veux?

Si vous ne connaissez pas la hauteur de l’élément à l’avance, la procédure est légèrement plus compliquée. Vous devez animer l’opacité directement pour s’atténuer et vous devez masquer le contenu avec la visibilité CSS pendant qu’il est “glissant”.

La visibilité CSS “masquée” permet au contenu d’occuper l’espace dans le document comme il le ferait normalement, tout en restant masqué; L’affichage CSS “aucun” ne fait pas que masquer l’élément, il le supprime du stream de documents. En masquant l’élément à l’aide de la visibilité, vous pouvez le faire glisser jusqu’à ce qu’il atteigne toute sa hauteur, le contenu de l’élément demeurant invisible.

De même, le contenu atténué lors de l’utilisation de la fonction fadeIn de jQuery suppose qu’un élément est initialement masqué avec l’affichage “none”. Par conséquent, cela ne fonctionnera pas si nous utilisons la visibilité. Au lieu de cela, nous rendons l’élément initialement totalement transparent (opacité 0.0); une fois l’animation glissante terminée, nous définissons la visibilité sur “visible” puis animons l’opacité de totalement transparent à totalement opaque (0,0 à 1,0).

En supposant que l’élément soit initialement masqué (fonction d’affichage CSS “none” ou fonction de masquage jQuery):

 $(element).css("visibility", "hidden").slideDown("slow", function() { $(this).css("opacity", 0.0).css("visibility", "visible").animate({ "opacity": 1.0 }, "slow"); }); 

NB: Soyez très prudent en tapant “visibilité” et “visible” car ils sont facilement mal orthographiés – source de nombreux bugs frustrants.

Vous ne devez PAS utiliser la visibilité, car vous pouvez accomplir la même chose en rendant le contenu initialement transparent, mais son utilisation rend plus explicite ce qui se passe. C’est-à-dire que cela fonctionne aussi:

 $(element).css("opacity", 0.0).slideDown("slow", function() { $(this).animate({ "opacity": 1.0 }, "slow"); }); 

Donnez ceci: http://jsfiddle.net/solidsource/67XZX/