滚动时Jquery动画停止

时间:2015-09-28 15:25:06

标签: jquery html css jquery-animate

经过一段时间的搜索,我发现了一段代码,可以完成我需要的一切。然而,有一件事困扰着我。如果用户滚动页面,动画将停止。如果用户停止滚动动画继续。因此,有时一切都会立即弹出。

这是我的代码:

$(window).scroll(function(){
var st = $(this).scrollTop(),
    winH = $(this).height(),
    add = 500;

$('.hideme').each(function(){
    var pos = $(this).position().top;

    if(st + winH >= pos + add){
        $(this).stop().animate({'opacity':'1', 'margin-left':'0px'}, 500);
    }
    else{
        $(this).stop().animate({'opacity':'0', 'margin-left':'20px'}, 500);
    }
});
});

CSS:

.hideme {
    opacity:0;
    margin-left: 20px;
}

HTML:

<h3 class="hideme"></h3>
<p class="hideme"></p>
<p class="hideme"></p>

我猜这与.stop()部分有关,但我对此并不是一个新秀。任何帮助将不胜感激。

0 个答案:

没有答案