Question

我是jquery的新手，我自己也陷入困境，如何为一段脚本添加淡入淡出？我有一个固定的标题，并希望在滚动60px之后该类淡入另一个类，我到目前为止已设法将它拼接在一起...

我认为.fadeIn位可行，但是，它没有：）

任何帮助都将非常感谢！感谢。

<script>
var fixed = false;


$(document).scroll(function() {
if( $(this).scrollTop() > 60 ) {
    if( !fixed ) {
        fixed = true;
        $('.header').css({background:'#242323'}).fadeIn('fast');
        $('.header').css("border-bottom-color", "#242323").fadeIn('fast');
    }
} else {
    if( fixed ) {
        fixed = false;
        $('.header').css({background:'none'}).fadeIn('fast');
        $('.header').css("border-bottom-color", "#fff").fadeIn('fast');
    }
}
});
</script>

Answer 1

为了淡入工作，您需要不显示您的元素。因此，如果不先显示它然后淡入淡出，你将达到你想要的效果。

<强> CSS / 如果需要，可以在js内容纳此css。对于此示例，由于布局未知且也为了清晰起见，因此已将其分开。 / .header { 身高：50px; 宽度：100％; 位置是：固定; 显示：无; 白颜色; }

<强> JS

var fixed = false;

$(document).scroll(function() {
if( $(this).scrollTop() > 60 ) {
    if( !fixed ) {
        fixed = true;
        $('.header').css({background:'#242323',
                          'border-bottom':'1px solid #242323'}).fadeIn('fast');
    }
} else {
    if( fixed ) {
        fixed = false;
        $('.header').fadeOut('fast');
    }
}
});

<强> HTML

<div class="header">the header</div>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus....</p>

http://jsfiddle.net/vjk9a/

Jquery - 我如何将一个类淡化为另一个类

1 个答案: