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

您忘记添加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

Answer 2

我强烈反对使用所描述的方法。使用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

Answer 3

可能有两个原因。

您没有将jQuery库附加到您的页面。
您忘记在HTML页面的正文中放置JavaScript代码。

注意：在</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 Library：

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

使用jquery循环移动图像

3 个答案: