爲什麼jquery animate（）不適用於我的情況？

我有以下的HTML佈局：爲什麼jquery animate（）不適用於我的情況？

<html> 
    <head> 
     ... 
    </head> 
    <body> 
     <header class="fluid-container"> 
      <div class="nav-wrapper"> 
       ... 
      </div> 
     </header> 
     <section class="salutation fluid-container"> 
      <div class="intro-wrapper"> 
       ... 
      </div> 
     </section> 
    </body> 
</html>

我的目標是隱藏介紹，包裝每當我的窗口滾動比60像素更反之亦然。因此，我已經實現了以下JQuery代碼來實現上述目標。

var checkScroll = true; 

$(window).scroll(function() { 

    if($(this).scrollTop() > 60 && checkScroll) { 
     $(".intro-wrapper").stop().animate({display:'none'}, 400); 
     checkScroll = false; 
     console.log('Scrolling down. \t checkScroll: ' + checkScroll); 
    } 

    else if($(this).scrollTop() < 60 && !checkScroll) { 
     $(".intro-wrapper").stop().animate({display:'block'}, 400); 
     checkScroll = true; 
     console.log('Scrolling up. \t\t checkScroll: ' + checkScroll); 
    } 
});

但不幸的是，我一直無法理解爲什麼動畫沒有發生。請指出我上面的代碼中的錯誤，並幫助我找出解決方案。

請注意console.log()正在呈現的結果，正如預期，即條件越來越適當滿足，環適當完成其旅程。

來源

2017-04-21 ikartik90

display將不會與animate一起使用。除了其他答案之外，您可以改爲使用show()和hide()。

從http://api.jquery.com/animate/：

注意：與速記動畫的方法，如.slideDown（）和.fadeIn（）時，.animate（）方法不會使隱藏的元件的效果的一部分是可見的。例如，給定$（「someElement」）.hide（）。animate（{height：「20px」}，500），動畫將運行，但元素將保持隱藏狀態。

來源

2017-04-21 20:24:19

而是有生的在這裏你可以使用jQuery .fadeIn（）.fadeOut（）方法來顯示或隱藏元素有延遲。

顯示屬性不會在jQuery的動畫作品。參考animate

來源

2017-04-21 20:21:47

好吧，我明白你的意思。但爲什麼不'animate（）'工作？ – ikartik90

http://api.jquery.com/animate/瀏覽此鏈接中黃色突出顯示的註釋。 –

顯示爲none /塊不能被動畫。會轉而溢出動畫的高度，以0：隱藏

或者你可以用CSS過渡容易做到這一點：

// hide it 
$(".intro-wrapper").addClass('hidescroll'); 
// show it again 
$(".intro-wrapper").removeClass('hidescroll');

然後在CSS：

.intro-wrapper { 
    transition: height .5s ease-in; 
    height: 400px; 
} 

.intro-wrapper.hidescroll { 
    height: 0; 
    overflow: hidden; 
}

來源

2017-04-21 20:26:01 ARS81

爲什麼jquery animate（）不適用於我的情況？

回答

相關問題