滚动到后如何淡入元素

Question

我正在使用滚动脚本，当页面上到达某个点时，该脚本将元素的显示从无显示更改为阻止。

有什么方法可以应用淡入淡出以及更改显示，甚至加载动画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';
    }
}

}

Answer 1

您只需链接.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);

        }
    }
}

PS我不确定这是不是错字，但是logosmall是类还是id？ 如果是一门课，则需要在其.logosmall加上一个句点： .logosmall 。 如果是id，则需要在其#logosmall号： #logosmall 。

Answer 2

那改变呢

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

至

$('logosmall').fadeIn();

？

Answer 3

我还不太了解您的需求。 但是，如果您只想进行一个淡入淡出，则解决方案在此处http://api.jquery.com/fadeIn/

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