Faites glisser vers le Haut/vers le Bas avec JQuery jusqu'à une certaine hauteur, est-ce possible?

Est-il possible de glisser un div en haut (de clôture), mais pas complètement ?

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

Merci d'avance,
mem

  • Vous pouvez animer/modifier la hauteur.
InformationsquelleAutor MEM | 2011-12-06
  1. 8

    Quelque chose comme cela peut 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 juste être la taille d'origine de la div, et le 30px peut être cependant beaucoup que vous voulez montrer quand il est destiné à être caché.

    • Merci beaucoup! Deux choses: 1) Nous devons déclarer l'origine div hauteur de toujours? Je demande cela parce que... la hauteur peut varier en fonction du contenu. 2) Si l'on veut, après cela, le fondu de cette petite partie que nous venons d'animer, il sera ok oui?
    • Ici, un violon, en montrant qu'il peut permettre à des hauteurs différentes en cas de déclaration d'une variable: jsfiddle.net/Skooljester/HdQSX Et le fondu après l'animation ne devrait pas être un problème.
    • Merci beaucoup pour votre temps. Tout à fait clair. 😉
    InformationsquelleAutor ayyp
  2. 2

    La meilleure façon d'ouvrir div à sa hauteur d'origine est à l'aide de slideDown().
    Le problème est que cette fonction nécessite div être cachés, avant de pouvoir l'ouvrir.
    La façon 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 });
});
    InformationsquelleAutor Skatrix
  3. 1

    Je ne recommande pas l'utilisation de jQuery animate méthode, car il est parfois buggy dans certains navigateurs.
    Animer la diapositive avec les transitions CSS est un meilleur choix (selon moi), par la définition de la div ou de la hauteur max de hauteur.

    CSS:

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

    sur un clic, jeu de max-hauteur avec jQuery:

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

    Puis retirez le style quand il est cliqué de nouveau:

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

    Vous pouvez regarder cette démo exemple

    InformationsquelleAutor Calsal