javascript - 循环图像使用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>	
<script>
 function loopDown(){
        $(".applePic").animate({
            marginTop : 10
            },
            500, function() {
            loopUp();
        });
    }

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

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

	loopDown();
	
</script>