jQuery animieren nicht richtig anpassen

Question

Ich habe einige JavaScript geschrieben, um die Größe einer Menüleiste zu ändern, der Code gibt jedoch nicht die richtigen Werte zurück. Es fügt height:147px; min-height:70px; im Attribut style des Elements hinzu, wenn nach unten gescrollt wird. Ich möchte aber auch die Höhe 70px haben.

Zum Testen habe ich versucht, es im Chrome Debugger zu ändern. Jedes Mal, wenn ich es ändere, wechselt es jedoch direkt zurück. Hier ist der Code:

$(window).on('scroll', function() { 
    if ($(window).width() > 900) { 
     var scrollTop = $(window).scrollTop(); 
     if (scrollTop > 45) { 
      $('#wpadminbar').fadeOut(); 
      $(".bottom_bar").addClass("stickymenu"); 
      $('.bottom_bar').stop().animate({height: "70px"},300); 
      $('.bottom_bar').stop().animate({minHeight: "70px"},300); 
      $('.bottom_bar.menuwrapper').stop().animate({lineHeight: "70px"},300); 
      $('.bottom_bar.menuwrapper').stop().animate({height: "70px"},300); 
     } 
     else { 
      $('#wpadminbar').fadeIn(); 
      $(".bottom_bar").removeClass("stickymenu"); 
      $('.bottom_bar').stop().animate({height: "147px"},300); 
      $('.bottom_bar').stop().animate({minHeight: "147px"},300); 
      $('.bottom_bar.menuwrapper').stop().animate({lineHeight: "147px"},300); 
      $('.bottom_bar.menuwrapper').stop().animate({height: "147px"},300); 
     } 
    } 
}); 

Answer 1

Die Art und Weise dieses Code geschrieben wird, wird die Animation in der oberen Zeile wird sofort zu stoppen, weil die zweite Leitung zur gleichen Zeit ausgeführt wird (nicht nach der 300 ms-Animation), und zu stoppen irgendwelche laufenden Animationen.

$('.bottom_bar').stop().animate({height: "70px"},300); 
$('.bottom_bar').stop().animate({minHeight: "70px"},300); 

beide Linien in ein Kombinieren dieses Problem zu beheben, etwa so:

$('.bottom_bar').stop().animate({height: "70px", minHeight: "70px"},300); 

dies in Ihrem Beispiel für alle Paare tun und sehen, ob das Problem behebt.