滾動後的Jquery addclass 500px

我想使用jquery向頁面滾動500px後向類中添加一個類。我找到了一種方法，但它是一個直接的過渡，我希望能夠控制需要多長時間才能像使用普通的Jquery addclass一樣添加類。滾動後的Jquery addclass 500px

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 
    if (scroll >= 500) { 
     $(".nav").addClass("navnewclass"); 
    } 
});

我試着這樣做：

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 
    if (scroll >= 500) { 
     $(".nav").addClass("navnewclass", 2000); 
    } 
});

，但它是一樣的。

來源

2013-08-17 Dave

我相信他在談論在jQueryUI中使用'.toggleClass'時兩個類之間的轉換。 **編輯**哦，你已經回答了。咄。 –

我想能夠控制需要多長時間才能像使用普通的Jquery addclass一樣添加類。

addClass是總是瞬間，它不是動畫套件的一部分。

有插件可以爲你做基於類的動畫（最明顯的是jQuery UI's addClass override），但jQuery本身不支持。只需將jQuery UI添加到您的頁面將使您的第二個示例工作。但也有其他選擇。

您的選擇是使用其中一個插件，或直接使用動畫屬性（使用animate）而不是使用類。請注意，jQuery只動畫某些種類的屬性（不是，值得注意的是，顏色 — jQuery UI也增加了對動畫顏色的支持）。

下面是使用jQuery UI動畫類（帶顏色）的示例：Live Copy | Live Source

<style> 
.testing { 
    color: white; 
    background-color: blue; 
} 
</style> 

<!-- ...and later in the body... --> 

<p>After half a second, the div below will spend two seconds animating the addition of a class.</p> 
<div class="nav">This is a test .nav element</div> 
<script> 
setTimeout(function() { 
    $(".nav").addClass("testing", 2000); 
}, 500); 
</script>

來源

2013-08-17 12:27:05

使用動畫效果出色。謝謝！ – Dave

@Dave：啊，很好，很高興幫助。 –

另一個問題是，當我向下滾動時會產生動畫效果，但當您向後滾動到頂部時，是否還有一種將其恢復動畫的方法？ – Dave

它對我很好。

$(document).scroll(function() {  
var scroll = $(this).scrollTop(); 
if (scroll >= 500) { 
setTimeout('$(".nav").addClass("navnewclass")',1000); 
} 
});

而不是1000你可以設置你的時間。

來源

2013-08-17 13:40:50

滾動後的Jquery addclass 500px

回答

相關問題