Animating a pic with javascript

Question

if i have an animated gif go left to right, how do i switch the gif to go from right to left via javascript? I have it working but I don't know how to stop the gif and switch it to another gif to go from right to left. it just loops the same gif from left to right and back to left. The reverse gif is ani_catrev.gif.

   <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Cat running</title>
     <style type="text/css">
     #container {
    background:url(catBack1200.jpg) no-repeat;
    width:1200px;
    height:440px;
}
#catbox {
    position:absolute;
    top:330px;
    left:10px;
}
</style>
<script type="text/javascript">
    var switchDirection = false;
function doAnimation() {
var catbox = document.getElementById("catbox");
var currentLeft = catbox.offsetLeft;
var newLocation;
if (switchDirection == false)
{
newLocation = currentLeft + 5;
if (currentLeft >= 1000)
{
switchDirection = true;
}
}
else
{
newLocation = currentLeft - 5;
if (currentLeft <= 0)
{
switchDirection = false;
}
}
catbox.style.left = newLocation + "px";
}
</script>
</head>

<body onload="setInterval(doAnimation, 10)"> 
<div id="container">
<div id="catbox">
    <img src="ani_cat.gif" id="cat" width="100" height="60" alt="busy kitty" />
</div>
</div>
</body>
</html>

You can't control a GIF through JS. You might look into using multiple GIFs and letting the JS switch between them. — sushain97, Oct 11 '13 at 16:39
its two different gifs. I need the JS to switch between them. — 2Truth, Oct 11 '13 at 16:45

Jay · Accepted Answer · 2013-10-11T17:04:11.300

2

You need to get a reference to your cat image:

var catimg = document.getElementById("cat");

You could place that line of code under your declaration for var catbox. Next, the first line of code inside your if (switchDirection == false) should be:

if (catimg.src != 'ani_cat.gif') catimg.src = 'ani_cat.gif';

and inside the else portion of your switchDirection clause:

if (catimg.src != 'ani_catrev.gif') catimg.src = 'ani_catrev.gif';

Here's how the function should look:

function doAnimation() {
    var catbox = document.getElementById("catbox");
    var catimg = document.getElementById("cat");
    var currentLeft = catbox.offsetLeft;
    var newLocation;

    if (switchDirection == false)
    {
        newLocation = currentLeft + 5;
        if (catimg.src != 'ani_cat.gif') catimg.src = 'ani_cat.gif';

        if (currentLeft >= 1000)
        {
            switchDirection = true;
        }
    }
    else
    {
        newLocation = currentLeft - 5;
        if (catimg.src != 'ani_catrev.gif') catimg.src = 'ani_catrev.gif';

        if (currentLeft <= 0)
        {
            switchDirection = false;
        }
    }

    catbox.style.left = newLocation + "px";
}

edited Oct 11 '13 at 17:04

answered Oct 11 '13 at 16:47

Jay

238
2
11

can you explain a little more, I am getting syntax errors... do I take out the (switchDirection == false)? – 2Truth Oct 11 '13 at 16:55
or better yet, set the catimg.src where you set your switchDirection variable. Then, you will not need to add another if statement (those are costly on performance). – Jay Oct 11 '13 at 17:07
thank you. I just missed one "{" however, the gif is not animated anymore. It works but the gif itself isn't animated anymore. The JS works but the gif is frozen. Do you know why? – 2Truth Oct 11 '13 at 17:09
I don't know, but I did come across [this article](http://stackoverflow.com/questions/191413/why-does-my-spinner-gif-stop-while-jquery-ajax-call-is-running) that may be of some help if you are using IE. You may try changing your interval to 20 or 30 and see if that helps. – Jay Oct 11 '13 at 17:16
I am using Chrome, Never IE except for browser compatibility. Thank you for your help. I'll figure it out. – 2Truth Oct 11 '13 at 17:18
you're welcome. If my answer resolved your initial question, please mark it as the accepted answer ;) – Jay Oct 11 '13 at 17:21

Animating a pic with javascript

1 Answers1