Question

我最近一直在网站上使用这个设置......

CSS

body {
 height:2000px;   
}

#top-box {
 position:fixed;
 width:200px;
 height:200px;
 margin-left:100px;
 margin-top:50px;
 background-color:blue;   
 z-index:2;   
}

#bottom-box {
 position:fixed;
 width:200px;
 height:200px;
 margin-left:110px;
 margin-top:60px;
 background-color:red;  
 z-index:1;    

}

的JavaScript

$(document).ready(function() {
    var away = false;

 $(document).scroll(function() {
    if ($(document).scrollTop() > 250) {
        if (!away) {
            away = true;
            $('#bottom-box').stop().animate({
                'margin-top': '200px'
            }, 1500);
        }
    } else {
        away = false;
        $('#bottom-box').stop().animate({
            'margin-top': '60px'
        }, 0);
    }
});
});

HTML

<div id="top-box"></div>
<div id="bottom-box"></div>

这使得一旦用户向下滚动250个像素，红色框就会动画并从蓝色框下方滑出。第一个动画是定时的，因此转换是显而易见的（红色框可见地滑出）。

然后进行设置，以便如果用户向上滚动超过250像素，则红框会在蓝框下方移回。这是在没有计时器的情况下完成的，因此转换是即时的（红色框会快速回到它的原始位置）。

这很好，可以做我需要做的一切。但我很好奇是否有更好的方法来实现这个第二个动画，没有使用动画，只是让红色框“重置”到“margin-top：60px”，而无需定时或.animate ？

基本上，我问的是......

        $('#bottom-box').stop().animate({
            'margin-top': '60px'
        }, 0);

JavaScript的

部分以不同的方式编写，以更有效地实现相同的结果，但不使用动画？就像一种“设置'底部'到'边缘顶部'：'60px'”？

Answer 1

$('#bottom-box').stop().css({ 
        'margin-top': '60px' 
    });

Answer 2

为什么不

$('#bottom-box').css('margin-top', '60px');

Answer 3

我认为使用jquery .css更整洁

http://jsfiddle.net/mnRNE/1/

        $('#bottom-box').stop().css('marginTop', '60px');

技巧

将Jquery .animate替换为0次更高效的东西

3 个答案: