2016-12-19 12 views
1

メニューバーのサイズを変更するためのJavaScriptをいくつか作成しましたが、コードは正しい値を返しません。下方向にスクロールすると、要素のstyle属性にheight:147px; min-height:70px;が追加されます。しかし、私は身長を70pxにしたい。jQueryアニメーションが正しく調整されない

テストのために、Chrome Debuggerで変更しようとしました。しかし、私がそれを変更するたびに、それは直接戻って変更されます。ここでは、コードされています。二行目は(ない300ミリ秒のアニメーションの後)を同時に実行し、停止しますので、

$(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); 
     } 
    } 
}); 

答えて

0

このコードが書かれている方法は、一番上の行にあるアニメーションがすぐに停止する予定です進行中のアニメーション。

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

そうのように、この問題を解決するために一つに両方の回線を組み合わせる:

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

はあなたの例では、すべてのペアのためにこれを行うと、この問題を修正するかどうかを確認します。

関連する問題