使用jQuery动画div

Question

先生，

在我的html页面中，有一个具有文本框和按钮的div。 在文本框焦点事件发生时，整个div应当动画到顶部，然后向下动画，并且该动画应重复进行，直到焦点移出文本框。 我创建了一个jsfiddle。

http://jsfiddle.net/k6yxu/7/

码：

<style type="text/css">
html,body
{
    padding:0;
    margin:0;
}
.textbox
{
    padding:5px 10px 5px 10px;
    font-family: "Cabin", sans-serif;
    font-size:medium;
    width:200px;
}
.textbox:focus
{
    outline:none;
}
.button
{
    margin-left:-5px;
    width:120px;
    padding:5px 10px 5px 10px;
    font-family: "Cabin", sans-serif;
    font-size:medium;
    background-color:#78d6b1;
    color:White;
    outline:none;
}
.button:hover
{
    background-color:#42d39b;
    cursor:pointer;
}
#float_div
{
    /*border:1px dotted #ccc;*/
    top:200px;
    position:relative;
    /*margin:auto;*/
}
#container
{
    border:1px dotted #ccc;
    width:50%;
    margin:auto;
}
</style>

<div id="float_div">
<input type="text" id="txtEmail" class="textbox" />
<input type="button" id="btnEmail" class="button" value="SUBMIT" />
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div>

<script src="jquery-1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">

    $('#txtEmail').focus(function () {
        $('#float_div').animate({ 'top': '180px' }, 3000, function () {
            $('#float_div').animate({ 'top': '200px' }, 3000, function () {
                $('#float_div').animate({ 'top': '180px' }, 3000, function () {
                    $('#float_div').animate({ 'top': '200px' }, 3000);
                });
            });
        });
    });
        $('#txtEmail').blur(function down() {
            $('#float_div').animate({ 'top': '200px' }, 3000);
        });

</script>

Answer 1

那这个呢？

$('#txtEmail').focus(function () {            
    shakeIt();              
});
$('#txtEmail').blur(function down() {
    $('#float_div').stop();
    $('#float_div').animate({ 'top': '200px' }, 3000);
});

function shakeIt(){
    $('#float_div').animate({ 'top': '180px' }, 3000, function () {
        $('#float_div').animate({ 'top': '200px' }, 3000, function(){
            shakeIt();
        });
    });  
}

您声明一个函数shakeIt（）来完成魔术。 然后递归调用它。 在blur（）上，您在div上调用stop（），并使用animate（）将其放下。

Answer 2

尝试这个 -

var flag = 1;
var $txtEmail = $('#txtEmail');
var $float_div = $('#float_div');

$txtEmail.focus(function() {
    flag = 1;
    f();
});

$txtEmail.blur(function down() {
    flag = 0
    $float_div.animate({ 'top': '200px' }, 300);
});

function f() {
    if (flag == 1) {
        $float_div.animate({ 'top': '180px' }, 300, f);
    } else if (flag == -1) {
        $float_div.animate({ 'top': '200px' }, 300, f);
    }
    flag = flag * -1;
}

改良的小提琴

请根据您的要求更改活动时间