无尽的动画div

Question

我试图创造无休止的动画div。 当高度为100时，其动画为300，当其高度为300时，则返回100。 这个动作应该无休止地重复。

<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/ 任何想法......

Answer 1

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 - 这不是很好吗？我们不再需要jQuery了！

Answer 2

你想要jQuery解决方案，所以这里......

使动画代码成为一个立即调用的函数表达式（IIFE），并在动画完成时再次调用自身（基本上将函数包装在括号中并调用它）：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/s9PfM/5/

$(document).ready(function () {
    (function pulse() {
        $('#green').animate({
            height: '300px'
        }, 1000, function () {
            $(this).animate({
                height: '100px'
            }, 1000, pulse);
        });
    })();
});

*注意：您显然不需要高度测试（可能会停止动画）