循環圖像與jQuery的上下移動

我有一個小腳本，上下移動一個蘋果，但它不工作，我不知道爲什麼。目前，蘋果向下移動然後向上移動，然後什麼都不做。循環圖像與jQuery的上下移動

這是我的代碼，不知道我在做什麼錯。

<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>

來源

2015-09-08 user2684521

可能有兩個原因適當供應商前綴。

您沒有將jQuery庫附加到您的頁面。
您忘記將JavaScript代碼放在HTML頁面的正文中。

注意： - 這個，因爲沒有jQuery庫添加是行不通只是內<script> .... </script>

這是結束的身體（</body>）之前放置在HTML標籤的底部腳本代碼。

<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>

來源

2015-09-08 18:56:43 divy3993

你忘了加上jQuery的文件準備好功能。

的Javascript：

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

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

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

Working example JSFiddle

來源

2015-09-08 18:45:19 IndieRok

我強烈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

來源

2015-09-08 18:53:20

循環圖像與jQuery的上下移動

回答

相關問題