Animating objects using two functions

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 is the link.

score 1 · Answer 1 · edited May 23 '17 at 11:43

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

score 0 · Answer 2 · answered Jan 26 '15 at 13:39

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

Animating objects using two functions

2 Answers2