当向下滚动页面时,jQuery使div滑入

Question

当用户向下滚动页面时,我想从右侧对我的页面进行div滑动(div将包含一个链接,将它们带回到页面顶部).这是我目前使用的代码:

jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 100) {
    jQuery('.totop').animate({ right: '0px' });
} else {
    jQuery('.totop').animate({ right: '-300px' });
}
});

而CSS:

.totop {
position:fixed;
bottom:50%;
right:-300px;
width:300px;
height:100px;
font-size:30px;
color:white;
background:#f18500;
}

该事业部的行为非常奇怪的是,当我向下滚动的div大约需要5秒钟出现,那么映入眼帘,但看起来是做几次试图保持静止前再次滑落,当我滑回它自败顶......但是又过了大约5秒钟.请帮忙找出我的代码有什么问题.

Answer 1

你的动画排队,使用.stop():

jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 100) {
        if (jQuery('.totop').hasClass('visible') == false) {
            jQuery('.totop').stop().animate({
                right: '0px'
            }, function () {
                jQuery('.totop').addClass('visible')
            });
        }
    } else {
        if (jQuery('.totop').hasClass('visible') == true) {
            jQuery('.totop').stop().animate({
                right: '-300px'
            }, function () {
                jQuery('.totop').removeClass('visible')
            });
        }
    }
});

演示:http://jsfiddle.net/MkJwm/