Question

爵士

在我的html页面中有一个包含文本框和按钮的div。在文本框焦点事件时，整个div应该动画到顶部然后向下，这个动画应该重复，直到焦点离开文本框。我创造了一个jsfiddle。

代码：

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

Modified fiddle

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

使用jquery动画div

2 个答案: