Question

我正在为最近的一个项目制作一个关卡，基本上Object7/8使用这两个函数左右动画animateRight() animateLeft()

我希望FfirstObj以单向上下动画70px，但我想使用与左右动画相同的方法。我已经在tota尝试了3次并且失败了，我真的想保留这种方法，因为它对我来说效果很好。我认为问题是我一次调用4个不同的函数？

任何建议，下面都是一些代码和链接，谢谢！

var fourLevelMove = ["#FseventhObj", "#FnineObj"];
var fourLevelMoveone = fourLevelMove.join(",");
$(fourLevelMoveone).css('margin-left', '0px');
animateRight();

function animateRight() {
    $(fourLevelMoveone).stop().animate({
        'marginLeft': "+=220px" //moves left
    }, 1100, animateLeft);
}

function animateLeft() {
    $(fourLevelMoveone).stop().animate({
        'marginLeft': "-=220px" //moves right
    }, 1100, animateRight);
}

HERE 是链接。

Answer 1

如果我理解正确的话，我认为这应该适合你的情况。

var firstLevelMoveone = "#FfirstObj";

function animateUp() {
    $(firstLevelMoveone).stop().animate({
        'marginTop': "-=70px" //moves up
    }, 1100, animateLeft);
}

function animateDown() {
    $(firstLevelMoveone).stop().animate({
        'marginTop': "+=70px" //moves down
    }, 1100, animateRight);
}

因为在回调动画函数（see this link）中使用递归时，Jquery不会溢出你的方法会正常工作。

顺便说一下，在你的代码中放置.stop（）。animate（）没有任何效果，因为stop（）方法删除了所有的排队动画（see the reference）

Answer 2

我缩短了你的代码，并编辑了你的css，只是为了显示如何反复动画你的FfirstObj。

这是html：

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<div id="outline">
    <div id="FfirstObj">1</div>
</div>

这是css：

#outline {
    height: 400px;
    width: 320px;
    border: black 1px solid;
    position: absolute;
}
#FfirstObj {
    height: 25px;
    width: 150px;
    margin-left: 90px;
    border: 2px solid red;
    margin-top: 10px;
    position: absolute;
}

这是js：

$(document).ready(function () {
    setInterval(
      function(){
        animateUpDown($("#FfirstObj"));
      },
      2300);
})

function animateUpDown($element) {
        $element.animate({
            'marginTop': "+=220px" //moves down
        }, 1100).animate({
            'marginTop': "-=220px" //moves Up
        }, 1100);
    }

以下是codepen链接：http://codepen.io/anon/pen/ByZqEz

使用两个函数设置动画对象

2 个答案: