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