在$（window）.scroll（）上使動畫（）平滑

我試圖創建一個標誌圖像，當窗口滾動時，它將動畫調整爲50％的大小。我的問題是，當窗口滾動時，動畫會運行多次。如何在窗口滾動大於62px的情況下將其設置爲動畫，並且如果窗口滾動回62px以上又如何？我嘗試添加類並刪除它們，但沒有運氣。我搜索了，但無法找到重複或類似的問題（我不好，如果有的話！）。

的jsfiddle這裏：http://jsfiddle.net/jtheman/kEtPd/（增加了一些額外的CSS中的jsfiddle模擬我真正的項目）

相關HTML：

<body> 
    <header> 
     <div id="logo"> 
      <img src="/img/logo.png"> 
     </div> 
...

CSS：

header { position:relative; } 
header #logo { position:absolute; top: 62px; left: 0; width: 365px; height: 53px; } 
header #logo img { position:absolute; bottom: 0; left: 0; width: 365px; height: 53px; }

而且我的jQuery：

$(window).scroll(function() { 
    var scrollpos = $(window).scrollTop(); 
    if (scrollpos > 62) 
    { 
     $('#logo img').stop().animate({ 'width': '182px', 'height': '26px'},1000); 
    } 
    else 
    { 
     $('#logo img').stop().animate({ 'width': '365px', 'height': '53px'},200); 
    } 
});

來源

2012-12-04 jtheman

您應該檢查的寬度仍然是原來的大小（365px），因此它僅在圖像還沒有開始調整大小動畫：

if (scrollpos > 62) 
{ 
    if ($('#logo img').width() == 365){ 
    $('header').css({'position':'fixed','top':'-62px'}); 
    $('#logo img').stop().animate({ 'width': '182px', 'height': '26px'},1000); 
    } 
}

-- SEE WORKING DEMO --

來源

2012-12-04 11:22:31 Curt

大柯特。我現在正在實施解決方案，看看它是否100％正常工作。我會盡快回來看看！ – jtheman

是的，工作！謝謝。我還在恢復動畫中添加了一個檢查，只是爲了使調整大小的工作更順利一些，如果（if（$ img.width（）<365）{...'聽起來像個好主意？（似乎效果更好！），請參閱http://jsfiddle.net/jtheman/kEtPd/3/我的編輯。 – jtheman

有道理:)如果您在第一個62像素內滾動，它將停止重新開始動畫 – Curt

在$（window）.scroll（）上使動畫（）平滑

回答

相關問題