javascript - Move a div back and forth across page - Stack Overflow

admin管理员组

文章数量:1415645

I'm trying to get a div to move from one end of the screen to the other on a loop. My javascript currently only attempts to move the div left but doesn't work.

    var func = function() {
       $("#bob").animate({"left": "-40px"}, 1000, function() { 
          $(this).animate({"left": "40px"}, 1000) 
       })

        setTimeout(func, 2000);
    }

Here is my jsfiddle:

/

I'm trying to get a div to move from one end of the screen to the other on a loop. My javascript currently only attempts to move the div left but doesn't work.

    var func = function() {
       $("#bob").animate({"left": "-40px"}, 1000, function() { 
          $(this).animate({"left": "40px"}, 1000) 
       })

        setTimeout(func, 2000);
    }

Here is my jsfiddle:

http://jsfiddle/zsal/N48Eg/1/

• javascript
• jquery

Share Improve this question Follow asked Jul 11, 2013 at 14:05 zigozigo 15911 silver badge1010 bronze badges 0

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

Name your functions, and then use one as the pletion callback in the other:

function goLeft() {
    $('#bob').animate({'left': '-40px'}, 1000, goRight);
}

function goRight() {
    $('#bob').animate({'left': '40px'}, 1000, goLeft);
}

goLeft();

So, when it's done going left, it should go right. When it's done going right, it should go left.

Disclaimer: Untested

P.S. You're missing jQuery in your Fiddle.

Your current fiddle doesn't work because you didn't include jQuery (from the Frameworks & Extensions drop-down on the left) and because you define the func() function but never actually call it. Fix those two things and it will work as shown here: http://jsfiddle/N48Eg/8/

Note, however, that your animation code is more plicated than it needs to be. Multiple animations on the same element will be queued automatically by jQuery, so you don't need to use a callback on the first one to start the second. And you can supply func as the callback on the second and avoid the setTimeout() pletely:

var func = function() {
    $("#bob").animate({"left": "-40px"}, 1000)
             .animate({"left": "40px"}, 1000, func);
}

func();

Demo: http://jsfiddle/N48Eg/18/

You just haven't called your function...

var func = function() {
    $("#bob").animate({"left": "-40px"}, 1000, function() { 
        $(this).animate({"left": "40px"}, 1000) 
    })
 setTimeout(func, 2000); // added back
}
func();

Your updated fiddle

First of, if you want the motion to continue, you need to use setInterval instead of setTimeout

Also you need to either move the setInterval out of the scope of func, or call func to start the animation

lots of problems. Heres a fiddle with a solution.

you also forgot to position:relative your absolutely positioned elements container.

JSFIDDLE

you weren't calling your function for starters

i made a new one called moveBob()

Here's the pure CSS version. http://jsfiddle/zDSRd/

#bob
{
    position:absolute;

    animation: fly 2s linear 0s alternate infinite;
    -webkit-animation: fly 2s linear 0s alternate infinite;
    -moz-animation: fly 2s linear 0s alternate infinite;
    -o-animation: fly 2s linear 0s alternate infinite;
    -ms-animation: fly 2s linear 0s alternate infinite;
}
@keyframes fly {
    from { transform: translateX(0px); }
    to { transform: translateX(500px); }
}
@-webkit-keyframes fly {
    from { -webkit-transform: translateX(0px); }
    to { -webkit-transform: translateX(500px); }
}
@-moz-keyframes fly {
    from { -moz-transform: translateX(0px); }
    to { -moz-transform: translateX(500px); }
}
@-o-keyframes fly {
    from { -o-transform: translateX(0px); }
    to { -o-transform: translateX(500px); }
}
@-ms-keyframes fly {
    from { -ms-transform: translateX(0px); }
    to { -ms-transform: translateX(500px); }
}

本文标签： javascriptMove a div back and forth across pageStack Overflow