如何在滚动后淡入元素

我正在使用滚动脚本，在页面上达到特定点时，将元素的显示从none更改为block。如何在滚动后淡入元素

是否有任何应用淡入淡出以及更改显示，甚至加载动画gif的方式？

这里是我的代码

window.onscroll = function() 
{ 
if(window.XMLHttpRequest) { 
    if (document.documentElement.scrollTop > 454 || self.pageYOffset > 454) { 
    $('logosmall').style.position = 'fixed'; 
    $('logosmall').style.top = '0'; 
    $('logosmall').style.padding = '10px'; 
    $('logosmall').style.display = 'block'; 
} else if (document.documentElement.scrollTop < 454 || self.pageYOffset < 454) { 
     $('logosmall').style.position = 'absolute'; 
     $('logosmall').style.top = '454px'; 
     $('logosmall').style.display = 'none'; 
    } 
}

}

来源

2012-04-13 James Aspden

只需连锁.fadeIn()或.fadeOut()。这样做时，使用.stop(true, true)总是一个好主意，因此您不会对动画进行排队。我也重新考虑了您的代码在造型方面的效率更高：

window.onscroll = function() { 

    if(window.XMLHttpRequest) { 
     if (document.documentElement.scrollTop > 454 || self.pageYOffset > 454) { 

      $('logosmall').css({ 

       'position' : 'fixed', 
       'top'  : '0', 
       'padding' : '10px' 

      }).stop(true,true).fadeIn('slow'); 

     } else if (document.documentElement.scrollTop < 454 || self.pageYOffset < 454) { 

      $('logosmall').css({ 

       'position' : 'absolute', 
       'top'  : '454px' 

      }).stop(true, true).fadeOut(0); 

     } 
    } 
}

P.S.我不确定它是否是一个错字，但是是一个类或一个标识符？如果是一堂课，您需要以一段时间前言：.logosmall。如果它是一个ID，你需要用一个英镑符号来表示它：#logosmall。

来源

2012-04-13 13:13:07

感谢您的帮助。我使用这个代码以及一个滚动来锚定，但他们似乎并没有一起工作，试图把一个jQuery不冲突，但没有工作... – 2012-04-15 12:18:52

你检查在控制台日志中的任何问题？把一些日志记录看看它停止的地方。 – 2012-04-15 14:00:51

有关更改

$('logosmall').style.display = 'block';

到

$('logosmall').fadeIn();

什么？

来源

2012-04-13 13:09:23

我真的不明白你需要什么。但是，如果你只想做一个淡入，解决的办法是在这里http://api.jquery.com/fadeIn/

$('#myDivID').fadeIn('slow', function() { 
     // Animation complete 
     });

来源

2012-04-13 13:11:50

如何在滚动后淡入元素

回答

相关问题