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中添加绝对位置。这就是我们动态制作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();
});

Fiddle Demo

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

jquery中的跳出效果不理想

2 个答案: