jquery - 向下移动元素jquery

Question

我有一个添加了背景图像的 html span 元素。使用 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);
})();