web-dev-qa-db-fra.com

Jquery - animer la hauteur

J'ai une barre de 10 pixels en haut de l'écran qui, lorsque vous cliquez dessus, je souhaite l'animer à une hauteur de 40 pixels, puis si vous cliquez à nouveau, revenez à l'animation jusqu'à 10 pixels. J'ai essayé de changer l'identifiant de la div, mais ça ne marche pas. Comment pourrais-je obtenir que cela fonctionne, ou y a-t-il une meilleure façon de le faire?

corps html:

<div id="topbar-show"></div>

css:

#topbar-show { width: 100%; height: 10px; background-color: #000; }
#topbar-hide { width: 100%; height: 40px; background-color: #000; }

javascript:

$(document).ready(function(){
  $("#topbar-show").click(function(){
    $(this).animate({height:40},200).attr('id', 'topbar-hide');
  });
  $("#topbar-hide").click(function(){
    $(this).animate({height:10},200).attr('id', 'topbar-show');
  });
});
jqueryheightjquery-animateattr
35
We're All Scholars

Essayez ceci:

$(document).ready(function(){
  $("#topbar-show").toggle(function(){
    $(this).animate({height:40},200);
  },function(){
    $(this).animate({height:10},200);
  });
});
54
Ian Christian Myers

Vous pouvez utiliser le toggle-event(docs) méthode pour assigner 2 (ou plus) gestionnaires qui basculent avec chaque clic.

Exemple:http://jsfiddle.net/SQHQ2/1/

$("#topbar").toggle(function(){
    $(this).animate({height:40},200);
},function(){
    $(this).animate({height:10},200);
});

ou vous pouvez créer votre propre comportement de bascule:

Exemple:http://jsfiddle.net/SQHQ2/

$("#topbar").click((function() {
    var i = 0;
    return function(){
        $(this).animate({height:(++i % 2) ? 40 : 10},200);
    }
})());
16
user113716

Vous devriez utiliser une class pour obtenir ce que vous voulez:

css:

#topbar { width: 100%; height: 40px; background-color: #000; }
#topbar.hide { height: 10px; }

javascript:

  $(document).ready(function(){
    $("#topbar").click(function(){
      if($(this).hasClass('hide')) {
        $(this).animate({height:40},200).removeClass('hide');
      } else { 
        $(this).animate({height:10},200).addClass('hide');
      }
    });
  });
14
Nathan Anderson

Très tard mais je m'excuse. Désolé si cela est "inefficace" mais si vous trouvez que tout ce qui précède ne fonctionne pas, essayez ceci. Fonctionne aussi au dessus de 1.10

<script>
  $(document).ready(function() {
    var position='expanded';

    $("#topbar").click(function() {
      if (position=='expanded') {
        $(this).animate({height:'200px'});
        position='collapsed';
      } else {
        $(this).animate({height:'400px'});
        position='expanded';
      }
    });
   });
</script>
3
user2756339

J'ai juste pensé à vous expliquer pourquoi votre solution n'a pas fonctionné: 

Lorsque $(document).ready() est exécuté, seul le sélecteur $('#topbar-show') peut trouver un élément correspondant dans le DOM. L'élément #topbar-show n'a pas encore été créé.

Pour résoudre ce problème, vous pouvez utiliser des liaisons d'événements en direct.

$('#topbar-show').live('click',function(e){});
$('#topbar-hide').live('click',function(e){});

C'est le moyen le plus simple de résoudre votre problème. La suite de ces réponses va plus loin pour vous fournir une meilleure solution à la place qui ne modifie pas l'attribut, espérons-le, permanent.

1
Aleksi Yrttiaho

Vous pouvez également utiliser cette astuce: Replace 

$("#topbar").click(function(){

par

$(document).on("click", "#topbar", function(){

Cela liera un événement sur un objet pas encore chargé.

1
Bronco

Le code ci-dessous a fonctionné pour moi dans jQuery2.1.3

$("#topbar").animate('{height:"toggle"}');

Vous n'avez pas besoin de calculer votre hauteur, rembourrage, marge et bordures. Ça va prendre soin.

1
Mahesh B

Ce serait une possibilité:

$(document).ready(function(){
  $("#topbar").toggle(function(){
    $(this).animate({height:40},200);
  }, 
  function(){
    $(this).animate({height:10},200);
  });
});
#topbar {
  width: 100%;
  height: 10px;
  background-color: #000;
  color: #FFF;
  cursor: pointer;
}
<!DOCTYPE html>
    <html>
    <head>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    </head>
    <body>
      <div id="topbar"> example </div>
    </body>
    </html>

1
AlfaTeK

A travaillé pour moi:

$(".filter-mobile").click(function() {
   if ($("#menuProdutos").height() > 0) {
      $("#menuProdutos").animate({
         height: 0
      }, 200);
   } else {
      $("#menuProdutos").animate({
         height: 500
      }, 200);
   }
});
0
Elliot