Question: I am making a level for a recent project, and basically `Object7/8` animate left and right using these two functions I have `animateRight()` `animateLeft()`

I want to have `FfirstObj` To animate up and down 70px each way, but I want to use this same method as the left and right animation. I have tried 3 times in tota and failed, I really want to keep this method because it works very well for me. I think the problem is im calling 4 different functions at once?

Any suggestions, below is some code and a link, thanks!

```
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);
}

```

And ***[HERE](http://jsfiddle.net/rtyavvpy/1/)*** is the link.

Answer: 
i think this should work in your case, if i understood correctly.

```
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);
}

```

becouse Jquery does not overflow when using recursion in callback animate function ([see this link](https://stackoverflow.com/questions/2705345/if-a-jquery-function-calls-itself-in-its-completion-callback-is-that-a-recursiv)) your method will work just fine. 

and by the way, putting .stop().animate() in your code doesn't do any effect, becouse stop() method deletes all the queing animations ([see the reference](http://api.jquery.com/stop/))
I have shortened your code, and editted your css a little bit just to display how to animate repeatedly your FfirstObj.

Here is the html:

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

```

Here is the 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;
}

```

Here is the 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);
    }

```

Here is the codepen link: <http://codepen.io/anon/pen/ByZqEz>