你好,当 window.scrollTop 大于标题位置时,我试图让每个标题都必须淡入,但我的代码不起作用,我得到了奇怪的 html 而不是我的标题。有什么想法吗?
$(window).scroll( function(){
/* Check the location of each desired element */
$('.inner h2').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
var header = $(this);
var title = header.html();
header.html('');
var arrayTitle = title.split('');
var i = 0;
var interval = setInterval(function(){
if (i > arrayTitle.length)
{
header.html(title); // wipe out the <span> tags
clearInterval(interval);
}
else
{
$('<span>')
.html(arrayTitle[i])
.appendTo(header)
.hide()
.fadeIn(50);
i++;
}
}, 50);
}
});
});
最佳答案
Solved Check Demo 1 和 Demo 2
我做了什么 更改了 span 的使用,而不是使用 var temp
通过 char 附加标题文本字符,每次将此 temp 作为内容传递到标题标签 innerhtml 作为 header。 html(临时)
稍微更改了代码,但确实有效
var temp='';
var interval = setInterval(function(){
if (i > arrayTitle.length)
{
header.html(title); // wipe out the <span> tags
clearInterval(interval);
}
else
{
if (i < arrayTitle.length)
{
temp =temp+arrayTitle[i];
}
// alert(temp);
header.html(temp).fadeIn(1000);
i++;
}
}, 50);
关于javascript - 标题在滚动时淡入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24106042/