Q:

Endlessly animated div

Im trying to create endlessly animated div.
When height is 100 its animeted to 300 and when its 300, then it return to 100. 
This action should be repeated endlessly.
<div id="green"></div>

#green{
    background-color: green;
    height: 100px;
    width: 100px;
}

var gHeight = $('#green').height();

if (gHeight == 100) {
    $('#green').animate({height:'300px'},1000,function(){
            var gHeight_after = $(this).height();

            if (gHeight_after == 300) {
            $(this).animate({height:'100px'},1000);
            };
    });
}

http://jsfiddle.net/fresa150/s9PfM/1/
Any ideas...

A:

CSS!
#red {
    animation: wavy 1s linear infinite alternate;
    -webkit-animation: wavy 1s linear infinite alternate;
}
@keyframes wavy {
    from {height:100px}
    to {height:300px}
}
@-webkit-keyframes wavy {
    from {height:100px}
    to {height:300px}
}

Demonstration -- Isn't it great? We don't need jQuery any more!

A:

You wanted jQuery solution, so here goes...
Make your piece of animation code an immediate invoked function expression (IIFE) and call itself again when the animation completes (basically wrap the function in brackets and call it):
JSFiddle: http://jsfiddle.net/TrueBlueAussie/s9PfM/5/
$(document).ready(function () {
    (function pulse() {
        $('#green').animate({
            height: '300px'
        }, 1000, function () {
            $(this).animate({
                height: '100px'
            }, 1000, pulse);
        });
    })();
});

*Note: You apparently did not need the height tests (which might potentially stop the animation)

