當用戶向下滾動時顯示Div

Question

我在這里有一個基於另一個小提琴的工作演示： http : //jsfiddle.net/jackdent/gRzPF/12/

基本上，我如何使div淡入而不是直接加載。

這是我使用的代碼：

$(".reveal").addClass("noshow");
var contentNumber = 0;

function reveal() {
    var constraintNumber = contentNumber + 7;
    //IMPORTANT - DO NOT DELETE
    $(window).trigger('resize');
    //IMPORTANT - DO NOT DELETE
    for (i = contentNumber; i < constraintNumber; i++) {
        //Get the nth div of class content, where n is the contentNumber, and make it shown
        $('.reveal').eq(contentNumber).removeClass("noshow");
        contentNumber ++;
    }
}

//Window scroll function
$(window).scroll(function() {
   if ($(window).scrollTop() == $(document).height() - $(window).height() )
    {
        reveal();
    }
});
reveal();

這是我的工作小提琴：

http://jsfiddle.net/barrycorrigan/4Ur6R/

我對jQuery完全陌生，並且已從上面的示例中獲取了此代碼。 它工作得非常好，我只希望DIV淡入。

我將不勝感激為您提供幫助。

Answer 1

更改此行：

$('.reveal').eq(contentNumber).removeClass("noshow");

對此：

$('.reveal').eq(contentNumber).fadeIn('300');

300是顯示所花費的時間（以毫秒為單位）。

DEMO

Answer 2

只是改變

.removeClass("noshow");

至

.fadeIn();

fadeIn還有一些額外的參數，例如持續時間，請參見此處 。

Answer 3

刪除noshow類，然后使用jQuery animate函數通過不透明度css屬性淡入：

$(".reveal").css('opacity', '0');
$(".reveal").removeClass('noshow');
$(".reveal").animate("opacity+=1");

http://api.jquery.com/animate/了解更多參數