Question

我有一个基于另一个小提琴的工作演示：http://jsfiddle.net/jackdent/gRzPF/12/

基本上我怎么能让divs淡入而不是直接加载。

以下是我使用的代码：

$(".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有一些额外的参数，如持续时间，请参阅here。

Answer 3

删除noshow类，然后使用jQuery animate函数淡入使用opacity css属性：

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

http://api.jquery.com/animate/用于额外参数

用户向下滚动时显示Div

3 个答案: