animating div using jquery

Question

Sir,

In my html page there is a div having textbox and a button. Upon textbox focus event the whole div should animate to top and then to down and this animation should repeat till the focus out of the textbox. I've created a jsfiddle.

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

Code:

<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

Try this -

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

Please change the event durations as per your requirements

Answer 2

What about this?

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

You declare a function shakeIt() which will do the magic. Then call it recursively. On blur() you call stop() on the div and put it down with animate().