Изображение Loop для перемещения вверх и вниз с jquery

Question

У меня есть небольшой скрипт, который перемещает яблоко вверх и вниз, но он не работает, и я не знаю, почему. В настоящее время яблоко движется вниз, затем оно движется вверх, а затем ничего не делает.

Вот мой код, не уверен, что я делаю неправильно.

<section class="apple"> 
    <img class="applePic" src="apple.png" alt=""> 
</section> 
<script type="text/javascript"> 
    function loopDown(){ 
     $(".applePic").animate({ 
      marginTop : 10 
      }, 
      500, function() { 
      loopUp(); 
     }); 
    } 

    function loopUp(){ 
     $(".applePic").animate({ 
      marginTop : 0 
      }, 
      500, function() { 
      loopDown(); 
     }); 
    } 

    loopDown(); 
</script> 

Answer 1

Там может быть две причины.

1. Вы не приложили библиотеку jQuery к своей странице.

2. Вы забыли разместить код JavaScript в теле на своей странице HTML.

Примечание: поместите код сценария в нижней части HTML-теги только до окончания тела (</body>) в <script> .... </script>

Вот она - эта не будет работать, как не добавляется библиотека JQuery.

<section class="apple"> 
 
    <img class="applePic" src="https://upload.wikimedia.org/wikipedia/en/5/54/Red_Apple.png" alt=""> 
 
</section> \t 
 
<script> 
 
function loopDown(){ 
 
     $(".applePic").animate({ 
 
      marginTop : 10 
 
      }, 
 
      500, function() { 
 
      loopUp(); 
 
     }); 
 
    } 
 

 
    function loopUp(){ 
 
     $(".applePic").animate({ 
 
      marginTop : 0 
 
      }, 
 
      500, function() { 
 
      loopDown(); 
 
     }); 
 
    } 
 

 
\t loopDown(); 
 
\t 
 
</script>

С JQuery библиотеки:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<section class="apple"> 
 
    <img class="applePic" src="https://upload.wikimedia.org/wikipedia/en/5/54/Red_Apple.png" alt=""> 
 
</section> 
 

 
<script> 
 
function loopDown(){ 
 
     $(".applePic").animate({ 
 
      marginTop : 10 
 
      }, 
 
      500, function() { 
 
      loopUp(); 
 
     }); 
 
    } 
 

 
    function loopUp(){ 
 
     $(".applePic").animate({ 
 
      marginTop : 0 
 
      }, 
 
      500, function() { 
 
      loopDown(); 
 
     }); 
 
    } 
 

 
\t loopDown(); 
 
\t 
 
</script>

Answer 2

Вы забыли добавить функцию Jquery Document ready.

Javascript:

$(function(){ 
    loopDown(); 
}); 

function loopDown(){ 
    $(".applePic").animate({ 
     marginTop : 10 
     }, 
     500, function() { 
      loopUp(); 
    }); 
} 

function loopUp(){ 
    $(".applePic").animate({ 
     marginTop : 0 
     }, 
     500, function() { 
      loopDown(); 
     }); 
} 

Working example JSFiddle

Answer 3

Я сильно disrecommend использовать описанный подход. Использование jQuery.fn.animate, особенно в цикле и особенно для анимации свойств, таких как marginTop (которые влияют на весь документ), будет производительным и отрывистым.

Css анимация - вот ваш лучший вариант - и трансформировать трансляцию translateY (вверх/вниз).

.applePic{ 
animation: updown 500ms infinite alternate; 
} 

@keyframes updown { 
0%{ 
transform: translate(0px,10px); 
} 
100%{ 
transform: translate(0px,0px); 
} 
} 

... конечно, с соответствующими префиксами поставщика, который относится к animation, @keyframes и transform