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

Question

I want create element which will appear with bounce effect and this effect should run all time while user not clicking to help_man , when its happened effect is completed. Now its work, but not prefer, effect run slow and eventually faster and faster. Bounce does not always stop on mouse click event. 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>

Thanks!

Answer 1

You need to add positon as abosulte in CSS.That is way we animate DOM elements on fly. Alway best pratices to clearInterval before call setInterVal(); which return number.

.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();
});

Fiddle Demo

Answer 2

I think you need to clear the interval,

Fiddle: 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();
});