javascript - 使用 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;
}

修改过的小提琴

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