循环图像以 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

您忘记添加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 (up/down).

.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 代码。

注意：将您的脚本代码放在 html 标签的底部，就在 <script> .... </script>[=14 内结束正文 (</body>) 之前=]

在这里 - 这个 不会工作 因为没有添加 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>

循环图像以 jquery 上下移动

Loop image to move up and down with jquery

html

javascript

jquery

jquery-animate