jquery - 要素を上下に移動するjquery

Question

background-image が追加された html スパン要素があります。jqueryを使って、止まることなく上下に動かそうとしています。残念ながら、私はjqueryに詳しくありません。ここに私が持っているものがあります:

    $(".cloud").animate( {"top": "+=20px"}, 3000, "linear", function() {
        $(".cloud").animate( {"top": "-=20px"}, 3000, "linear", function() {
            $this.moveCloud();
        });
    });

Answer 1

これを試して：

move_bottom();
function move_bottom() {
    $(".cloud").animate({
        "margin-top": "20px"
    }, 3000, "linear", function () {
        move_top();//call function to move top
    });
}
function move_top() {
    $(".cloud").animate({
        "margin-top": "0px"
    }, 3000, "linear", function () {
        move_bottom();////call function to move bottom
    });
}

ここでフィドル。

cssでもできます。

.cloud{animation:myfirst 5s infinite;-webkit-animation:myfirst 5s infinite;}
@keyframes myfirst{
    0%{margin-top:20px;}
    50%{margin-top:0px;}
    100%{margin-top:20px;}
}

ここでフィドル。

Answer 2

実際、必要なのはこれだけです。

ライブデモ

var $cloud = $('.cloud');
(function loop(){
   $cloud.animate({top: (this.offsetTop>0?'-=':'+=')+20 }, 3000, "linear", loop);
})();