Slide Up/Down avec JQuery jusqu'à une certaine hauteur - est-ce possible ?

Question

Est-il possible de faire glisser une div vers le haut (en la fermant) mais pas complètement ?

Je veux dire, glisser vers le haut mais laisser un peu de ce div affiché, est-ce possible ?

Merci d'avance, mem

Answer 1

Une solution de ce type pourrait fonctionner :

$("#div").toggle(
function(){
   $("#div").animate( { height:"500px" }, { queue:false, duration:500 });
},
function(){
   $("#div").animate( { height:"50px" }, { queue:false, duration:500 });
});

Au lieu de la 500px il peut s'agir simplement de la taille originale de la div, et le champ 30px peut être la quantité que vous souhaitez montrer lorsqu'elle est censée être cachée.

Mise à jour des commentaires

Voici un petit exercice qui montre qu'il peut autoriser des hauteurs différentes si elles sont déclarées dans une variable. Et l'évanouissement après l'animation ne devrait pas poser de problème.

http://jsfiddle.net/Skooljester/HdQSX/

var divTest = $("#test").height();
$("#test").toggle(
function(){
   $("#test").animate({ height: divTest + 'px' }, { queue: false, duration: 500 });
},
function(){
   $("#test").animate({ height:'50px' }, { queue: false, duration: 500 });
});

#test {
  display: block;
  background: #FF0000;
  height: 500px;
  width: 300px;
}

<div id="test">Test</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Answer 2

Je ne recommande pas l'utilisation de la méthode animate de jQuery car elle est parfois boguée dans certains navigateurs. Animer la diapositive avec des transitions CSS est un meilleur choix (selon moi), en définissant la hauteur de la div ou la hauteur maximale.

CSS :

.expandable {
  max-height: 3em;
  overflow: hidden;
  transition: max-height .3s;
}

au clic, définir la hauteur maximale avec jQuery :

$(.someSelector).css('max-height', expandedHeight);

Supprimez ensuite le style lorsque vous cliquez à nouveau sur le bouton :

$(.someSelector).attr('style', '');

Vous pouvez consulter cet exemple de démonstration

Answer 3

La meilleure façon d'ouvrir la div à sa hauteur d'origine est d'utiliser slideDown(). Le problème est que cette fonction exige que la div soit cachée avant de pouvoir l'ouvrir. La méthode suivante est un peu moche mais fonctionne bien :

$("#test").toggle(
function(){
   $("#test").css('height', 'auto').hide().slideDown('fast');
},
function(){
   $("#test").animate( { height:'50px' }, { queue:false, duration:500 });
});