使用jquery.animate（）和jquery.scroll（）

有沒有辦法根據滾動的位置扭轉引起的jQuery.animate() CSS變化逆轉由動畫效果上CSS的變化？我正在一個網站上工作，當用戶向下滾動時，我想要在元素上發生某種動畫效果。之後，當用戶向上滾動元素時，必須回到之前的狀態。一個例子：使用jquery.animate（）和jquery.scroll（）

$(window).scroll(function(){ 
    if(this.scrollTop() >= 300){ //Scrolling down to a point 300 or more 
     $('.foo').animate({ 
      'width': 100 
      'height': 100 
     }, 500, 'swing');  
    } 
});

正如你從上面的代碼片段看到的，當用戶向下滾動時會發生效果。現在下面是一個代碼，我可以邏輯思維的，以相反的效果將如何工作：

if(this.scrollTop() <= 300) { //Scrolling down to a point 300 or more  
    $('.foo').animate({ 
     'width': 10 
     'height': 10 
    }, 500, 'swing');  
}

點擊THE FIDDLE在行動中看到的代碼，並獲得更好的洞察力。

我已經看到很多插件做這個，但是有沒有更好的方式來做上面提到的場景，只用jQuery.animate()綁定jQuery.scroll()？如果是這樣，請給我一個例子嗎？或者你可以指示我鏈接？請指導我/諮詢我。

感謝您的幫助！

來源

2015-01-10 Zubair Pyromaniac

擲'停（）'在那裏，做一些反彈。由於滾動事件每秒觸發多次，您正在排隊顯着數量的動畫。也無需調用動畫，如果它已經爲這一階段 – charlietfl

做@charlietfl嗯......能不能請你給我出你的解釋的例子嗎？會真的感謝你。 –

您可以使用類是，創造你想要的屬性的類，你的情況

.scrolled { 
    height: 100px; 
    width: 100px; 
}

然後addClass，它接受其他選項你想要的，所以你可以

if(this.scrollTop() >= 300){ 
    this.addClass('scrolled', 500, 'swing'); 
} 

if(this.scrollTop() < 300){ 
    this.removeClass('scrolled', 500, 'swing); 
}

來源

2015-01-11 01:08:14 bwagner

嗯......那麼，如果我有什麼超過5元我想有在同一時間，5種不同的影響？ addClass/removeClass會有效嗎？ –

我沒有看到別的辦法，我唯一會做的就是讓有意義的類名（而不是滾動）並將所有轉換包裝到一個函數中，以聚合我看到的行爲 – bwagner

。感謝您的支持真的很感激它。 –

如果您不需要強迫jQuery來編輯對象的CSS，你可以告訴它添加/刪除類，而不是它會給你一個類似的效果。

如果你的對象的風格已經由爲10px的寬度/高度，那麼你就可以有一個像

.bar{ 
    height: 100px; 
    width: 100px; 
}

，並在你的JavaScript代碼樣式：

if(this.scrollTop() >= 300){ 
    this.addClass('bar'); 
}

那麼你可以做

removeClass('bar');

，當你不需要它。

https://api.jquery.com/addclass/

https://api.jquery.com/removeclass/

來源

2015-01-11 00:22:47 horsantula

如果我想對動畫效果有很多元素，這會很有效嗎？那麼寬鬆呢？ –

使用jquery.animate（）和jquery.scroll（）

回答

相關問題