Javascript 使用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>

函数loopDown（）{
$（“.applePic”）.animate({
玛金托普：10
},
500，函数（）{
loopUp（）；
});
}
函数loopUp（）{
$（“.applePic”）.animate({
玛金托普：0
},
500，函数（）{
loopDown（）；
});
}
loopDown（）；

您忘记添加Jquery Document ready函数了

Javascript:

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

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

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

---

我强烈反对使用上述方法。使用jQuery.fn.animate，尤其是在循环中，尤其是在属性（如

marginTop

）的动画中（影响整个文档），将消耗性能，而且不稳定

Css动画在这里是您最好的选择，并且可以设置transform translateY（向上/向下）的动画

---

…当然，使用适用于

动画

、

@关键帧

和

变换

的适当供应商前缀，可能有两个原因

您没有将jQuery库附加到页面

您忘记将JavaScript代码放在HTML页面的正文中

注意：将脚本代码放在html标记的底部，就在

中结束正文（
）之前

这里是-由于未添加jQuery库，因此此将不起作用



函数loopDown（）{
$（“.applePic”）.animate({
玛金托普：10
},
500，函数（）{
loopUp（）；
});
}
函数loopUp（）{
$（“.applePic”）.animate({
玛金托普：0
},
500，函数（）{
loopDown（）；
});
}
loopDown（）；

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

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