JSFiddle

Question

我有以下javascript代码：

$(window).scroll(function () {
    if ($(window).scrollTop() > 250) { 
        $('#logoheader').css("opacity", 1);
    }
    else{
        $('#logoheader').css("opacity", 0);
    }
});

这使我可以在滚过横幅后显示徽标。然而，这是一个冷硬的外观。我想让这一点更顺利，因此我尝试使用.fadeIn()和.fadeOut()但是我无法使其工作。有没有快速简便的方法来做到这一点？注意，由于兼容性问题，我无法使用CSS动画。

Answer 1

JS：

$(window).scroll(function () {
    if ($(window).scrollTop() > 250) { 
        $('#logoheader').fadeIn('slow');
    }
    else{
        $('#logoheader').fadeOut('slow');
    }
});

CSS（添加CSS仅用于显示功能，display:none;是您实际需要的唯一功能）：

#logoheader {
    display:none;
    height:100px;
    background:#000;
    color:#fff;
}

JSFiddle

Answer 2

如果您想要更顺畅的内容，请尝试使用：.fadeIn('slow')或.fadeIn('medium')。

它也适用于.fadeOut()。

Answer 3

您可以在jquery

中设置show方法的持续时间

$('#logoheader').show('slow');

有关详细信息：http://api.jquery.com/show/

Answer 4

fadeIn（）/ fadeOut（）设置要在outfading之后显示的元素：none。如果你不想淡入一个没有显示的元素，那么函数就会失败。解决方法是在fadeIn（）之前使用.hide（）元素，但更多的方法是在CSS中设置display：none

解决方法：

$(window).scroll(function () {
    $('#logoheader').hide(); //same as display:none in css
    if ($(window).scrollTop() > 250) { 
        $('#logoheader').fadeIn();
    }
    else{
        $('#logoheader').fadeOut();
    }
});

Answer 5

$(window).scroll(function () {
    if ($(window).scrollTop() > 250) { 
        $('#logoheader').fadeIn();
    }
    else{
        $('#logoheader').fadeOut();
    }
});

如上所述，问题出在您的CSS中，您必须将#logoheader设置为display: none而不是opacity: 0

Answer 6

这项工作很好http://jsfiddle.net/xtatanx/E9ZLm/1/可能你忘记删除不透明度：0;在你的CSS中。

$(window).scroll(function () {
    if ($(window).scrollTop() > 250) { 
        $('#logoheader').fadeIn();
    }
    else{
        $('#logoheader').fadeOut();;
    }
});

CSS

.fixedheight{
    height:800px;
    width:100%;
    background:blue;
    position:relative;
}
#logoheader{
    position:absolute;
    top:250px;
    left:0;
    background:red;
    width:100%;
    height:100px;
    **display:none;**
}

请注意display：none;

Answer 7

改进了@ APAD1解决方案：

var $target = $('#logoheader'); // declare it only one time

// it's a good idea check if the $target is already visible before force to show
// something that is already shown (and vice versa)

$(window).scroll(function () {
    if ( $(window).scrollTop() >= 250 && !$target.is(':visible') ) { 
        $target.fadeIn('slow');
    }
    else if( $(window).scrollTop() < 250 && $target.is(':visible') ){
        $target.fadeOut('slow');
    }
});

check jsFiddle

Answer 8

您可以使用相同的代码，只使用CSS转换

#logoheader{
   transition:opacity 1s ease;
   -moz-transition:opacity 1s ease; 
   -webkit-transition:opacity 1s ease; 
   -o-transition:opacity 1s ease; 
   -ms-transition:opacity 1s ease; 
}

多数民众赞成......

http://jsfiddle.net/vjSHL/

.fadeIn（）和.fadeOut（）的用法

8 个答案:

JSFiddle