элемент перемещения вверх вниз 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); 
})();