Jquery 具有关闭功能的连续动画功能

呃，有点难解释，所以我会保持简单（加上我已经起床24小时了：O）

想法是，你把鼠标放在父母身上，它的图像就会反弹。我希望反弹持续到mouseout事件。我正在尝试更好地使用jQuery，因此我尝试以下方法：

$.fn.bounce=function(){
    return this.each(function(){
        var self=this;
        this.original=$(this).css('position');
        if(this.original!='relative')$(this).css({'position':'relative'});
        //Not sure if using queues would be better? 
        $(this).animate({top:-20},200);
        $(this).animate({top:0},100);
        $(this).animate({top:-10,}100);
        $(this).animate({top:0,}50);
        $(this).animate({top:-5},25);
        $(this).animate({top:0},0,function(){$(this).css({'position':self.original});
    });
};

$('#parent').mousein(function(){$('img','#parent').bounce();});

---

如何使动画持续到鼠标移出我迷路了，甚至不知道从哪里开始寻找DX，我会这样做：

声明一个标志

bouncing=false

在

mouseover

（而不是

mousein

）上，将标志设置为

true

，并运行一个函数，只要

bouncing===true，该函数就会永久反弹

在
mouseout
上，将标志设置为false

JS

var bouncing = false;
var bounce = function () {
    //upward animation for .1 sec
    $('#parent').find('img').animate({top: "55px"}, 100, function () {
        //downward animation for.1 sec
        $(this).animate({top: "95px"}, 100, function () {
            if (bouncing === true) {
                //keep bouncing if the flag is set
                return bounce();
            } else {
                //otherwise we are done bouncing
                return true;
            }
        });
    });
};
$('#parent').mouseover(function () {
    //if we are already bouncing, do nothing
    if (bouncing === true) {
        return false;
    } else {
        //else set the flag true, and start bouncing!
        bouncing = true;
        bounce();
    }
});
$('#parent').mouseout(function () {
    //stop bouncing on mouse out
    bouncing = false;
});

#parent{
    width:300px;
    height:300px;
    border:2px solid black;
    border-radius:4px;
    position:relative;
}
#parent > img{
    position:absolute;
    top:75px;
    left:75px;
}

CSS

var bouncing = false;
var bounce = function () {
    //upward animation for .1 sec
    $('#parent').find('img').animate({top: "55px"}, 100, function () {
        //downward animation for.1 sec
        $(this).animate({top: "95px"}, 100, function () {
            if (bouncing === true) {
                //keep bouncing if the flag is set
                return bounce();
            } else {
                //otherwise we are done bouncing
                return true;
            }
        });
    });
};
$('#parent').mouseover(function () {
    //if we are already bouncing, do nothing
    if (bouncing === true) {
        return false;
    } else {
        //else set the flag true, and start bouncing!
        bouncing = true;
        bounce();
    }
});
$('#parent').mouseout(function () {
    //stop bouncing on mouse out
    bouncing = false;
});

#parent{
    width:300px;
    height:300px;
    border:2px solid black;
    border-radius:4px;
    position:relative;
}
#parent > img{
    position:absolute;
    top:75px;
    left:75px;
}

HTML

<div id=parent>
    <img src=someimg.jpg>
</div>



小提琴：

这是一个基本的想法，你可以通过调整动画速度，调整放松/关键帧，或者其他一些事情来使它更加健壮