当元素在浏览器窗口中，按顺序淡入

我试图从一个Stackoverflow问题结合代码，我发现here与我自己的代码。基本上，当#findme跨度在浏览器中时，我希望它自上而下地开始逐个淡入淡出（如上一篇文章中提到的，由Genericrich提供的代码）。当元素在浏览器窗口中，按顺序淡入

拨弄我已经安装is here.

这是我的JS，我似乎无法弄清楚什么，我做错了什么？

$(window).scroll(function() { 
if (!spanSeen && isScrolledIntoView('#findme')) { 

    //What I want to happen when the span element is in view 
    $("span").each(function (index) { 
     $(this).delay(400 * index).fadeIn(300); 
    }); 
    run = true; 
    } 
}); 

var spanSeen = false; 

function isScrolledIntoView(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
}

我是JS的新手，慢慢地学习一点一点，感谢先进。

来源

2013-10-19 Richard Teahan

刚刚意识到的ID名称，修正了小提琴。 –

时间戳：10/19/2013 2:22:35 PM 错误：TypeError：$（...）。offset（...）未定义源文件：http://fiddle.jshell.net/xgTQP/显示/ 行：45 –

回答我自己的问题，让别人遇到这个职位。

更改了一些代码后，我意识到这是我自己的错误，而不是针对css参数'不透明度' - 正在使用fadeIn不正确。我相信这是正确的，必要时进行修改。

正确的JS代码：

$(window).scroll(function() { 
if (!spanSeen && isScrolledIntoView('#findme')) { 

    //What I want to happen when the element is in view 
    $("span").each(function (index) { 
     $(this).delay(400 * index).animate({opacity: 1}, 500); 
    }); 
    run = true; 
} 
}); 

var spanSeen = false; 

function isScrolledIntoView(elem) { 
var docViewTop = $(window).scrollTop(); 
var docViewBottom = docViewTop + $(window).height(); 

var elemTop = $(elem).offset().top; 
var elemBottom = elemTop + $(elem).height(); 

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
}

来源

2013-10-20 15:26:12

当元素在浏览器窗口中，按顺序淡入

回答

相关问题