jquery中的弹跳效果在理想情况下不起作用。

Question

我想要创建元素，它将出现反弹效应，当用户不点击help_man时，这个效果应该一直运行，当它的发生效果完成时。现在，它的工作，但不喜欢，效果运行缓慢，最终更快。弹出并不总是在鼠标单击事件上停止。JsFiddle HTML：

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

联署材料：

<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

我觉得你需要清理一下时间，

小提琴：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();
});

Answer 2

您需要在CSS.That中添加位置，这是我们动态生成DOM元素的方式。在调用clearInterval ()之前，最好先使用setInterVal()；后者返回数字。

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

小提琴演示