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
    });
}

Fiddle here.

您也可以使用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;}
}

Fiddle here.

Answer 2

实际上这就是你所需要的：

<强> LIVE DEMO

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

向上移动元素jquery

2 个答案: