wake-up-neo.net

Jquery - animiere die Höhenumschaltung

Ich habe eine 10px-Leiste am oberen Rand des Bildschirms, die beim Klicken auf eine Höhe von 40px animiert werden soll. Wenn Sie dann erneut klicken, wird die Animation wieder auf 10px gebracht. Ich habe versucht, die ID des Div zu ändern, aber es funktioniert nicht. Wie kann ich das zum Laufen bringen, oder gibt es eine bessere Möglichkeit, dies zu tun?

body 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');
  });
});
35

Probieren Sie es aus:

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

Sie können den toggle-event verwenden.(docs) -Methode, um 2 (oder mehr) Handler zuzuweisen, die bei jedem Klick umschalten.

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

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

oder Sie könnten Ihr eigenes Toggle-Verhalten erstellen:

Beispiel:http://jsfiddle.net/SQHQ2/

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

Sie sollten eine class verwenden, um das zu erreichen, was Sie möchten:

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

Sehr spät aber ich entschuldige mich. Es tut uns leid, wenn dies "ineffizient" ist, aber wenn Sie festgestellt haben, dass all das nicht funktioniert, versuchen Sie es bitte. Funktioniert auch für über 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

Ich wollte Ihnen nur den Grund nennen, warum Ihre Lösung nicht funktioniert hat: 

Wenn $(document).ready() ausgeführt wird, kann nur der $('#topbar-show')-Selektor ein übereinstimmendes Element aus dem DOM finden. Das #topbar-show-Element wurde noch nicht erstellt.

Um dieses Problem zu umgehen, können Sie Live-Ereignisbindungen verwenden

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

Dies ist der einfachste Weg, um Ihre Lösung zu beheben. Der Rest dieser Antwort geht weiter, um Ihnen bessere Lösungen zu bieten, die das hoffentlich permanente id-Attribut nicht ändern.

1
Aleksi Yrttiaho

Sie können diesen Trick auch verwenden: Ersetzen 

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

durch

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

Dies bindet ein Ereignis an ein noch nicht geladenes Objekt ...;)

1
Bronco

Der folgende Code hat in jQuery2.1.3 für mich funktioniert

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

Müssen Sie nicht die Größe, Breite, Rand und Ränder des Dichts berechnen. Es wird aufpassen.

1
Mahesh B

Das wäre eine Möglichkeit:

$(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

Arbeitete für mich:

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