jQuery中的反弹效果无法理想地工作

Question

我想要创建带有反弹效果的元素，并且该效果应在用户未单击help_man所有时间运行，直到其发生的效果完成。 现在，它的工作（但不是首选）的效果运行缓慢，最终越来越快。 跳动并不总是在鼠标单击事件时停止。 JsFiddle HTML：

<div class='task_wrapper'>
<div class='help_man'>
<img src='images/cow.png'/>
</div>
</div>

JS：

<script src="js/jquery-ui-bounce.min.js"></script>
<script>
var to_stop = 0;
function run_bounce()
{
    if(to_stop==0)
    {
        $(".task_wrapper").effect( "bounce", "fast" );
        setInterval(run_bounce,3000);
    }else{
        return;
    }
}
$(document).ready(function(){
    $(".help_man").click(function() {
        to_stop = 1;
    });
    run_bounce();
});
</script>

谢谢！

Answer 1

您需要在CSS中添加positon作为正式版本，这是我们动态制作DOM元素的方式。 始终最好在调用setInterVal（）之前先清除clearInterval ; 哪个返回号码。

.task_wrapper{
    postion:absolute;
}

var to_stop = 0,interval;
function run_bounce()
{
    if(to_stop==0)
    {
        $(".task_wrapper").effect( "bounce", "fast" );
         clearInterval(interval);
         interval = setInterval(run_bounce,3000);
        setInterval(run_bounce,3000);
    }else{
         $(".task_wrapper").stop(); //Note here stop()       
    }
}
$(document).ready(function(){
    $(".help_man").click(function() {
        to_stop = 1;       
    });
    run_bounce();
});

小提琴演示

Answer 2

我认为您需要清除间隔，

小提琴： http : //jsfiddle.net/9nEne/13/

JS

var to_stop = 0, interval;
function run_bounce() {
    if(to_stop==0)
    {
        $(".task_wrapper").effect( "bounce", "fast" );
        clearInterval(interval);
        console.log(interval);
        interval = setInterval(run_bounce,3000);
    }else{
        $(".task_wrapper").stop();
    }
}
$(document).ready(function(){
    $(".help_man").click(function() {
        to_stop = 1;
    });
    run_bounce();
});