移动元素向上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 
    }); 
} 

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