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);

        }
    }
}

P.S。我不确定这是不是一个错字，但是logosmall是一个类还是一个id？如果它是一个类，则需要在其前面加上一个句点：.logosmall。如果它是一个id，你需要用井号开头：#logosmall。

Answer 2

如何改变

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

到

$('logosmall').fadeIn();

Answer 3

我真的不明白你需要什么。但是如果你只想制作一个fadeIn，解决方案就在这里http://api.jquery.com/fadeIn/

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

如何滚动到元素后淡入元素

3 个答案: