CODEWITHSUNDEEP
jqueryimageanimationreplace
asdf
asdf

Reputation: 35

jQuery image replacement animation (mimic animated gif)

I have a sequence of JPGS in the form of:

Logo_1001.jpg
Logo_1002.jpg
Logo_1003.jpg
Logo_1004.jpg
Logo_1005.jpg
...
all the way to
Logo_1208.jpg

I am trying to change the source of the images every second (roughly) to mimic an animated gif, using these JPGs. This animation starts when they click on the image.

Here is what im working with so far, although im sure it could be coded better.

Also, it isnt really working so well right now ;x

function StartAnimation() {
    var name = $('#logo').attr('src');
    var index = name.indexOf(".jpg");

    var int = name.slice(index-4,index);

    while(int<1208){
        int++;

        var newname=name.slice(0,index-4);
        newname=newname+int;
        name=newname+".jpg";

        $('#logo').attr('src',name).delay(500);
    }
}

$("#logo").click(function() {
    StartAnimation()
});

Thoughts? Aid?

Thanks

Upvotes: 1

Views: 4399

Answers (3)

Jared Farrish
Jared Farrish

Reputation: 49208

Here's a way, not "jQuery" per se.

var _animation_timer;
function LogoAnimate (go, num) {
    if (parseInt(num) == 'NaN' || parseInt(num) == undefined ||
        (_animation_timer == null && go != 'go') || go == 'stop')
    {
        clearTimeout(_animation_timer);
        return;
    }
    if (num >= 1208 || num < 1001) {
        num = 1001;
    }
    //$('#logo').attr('src','Logo_'+num+'.jpg');
    $('#logo').text('Logo_'+num+'.jpg');
    num++;
    _animation_timer = setTimeout('LogoAnimate("go","'+num+'")',1000);
}

$(document).ready(function(){
    var _images_preloaded = [];
    for (i = 1001; i <= 1208; i++) {
        _images_preloaded[i] = new Image();
        _images_preloaded[i].src = 'Logo_'+i+'.jpg';
    }
});

Demonstration markup:

<div id="logo">Not started.</div>
<p>
 <a href="javascript:LogoAnimate('go','1001');">Start</a> - 
 <a href="javascript:LogoAnimate('stop');">Stop</a>
</p>

Note, since I don't have that many images, my test just involved changing the text. You would just need to remove the quoted line and remove the line below using $.text(). Not also I assume you can figure out the $.click() part.

Upvotes: 0

Dogbert
Dogbert

Reputation: 222198

Just got this working using setTimeout.

$("#logo").click(function() {
    var $logo = $(this), src = $logo.attr("src");
    var index = src.indexOf('.jpg');
    var step = +src.slice(index-4, index);

    function frame() {
        step++;
        if(step < 1050) {
            var newSrc = src.slice(0, index-4) + step + ".jpg";
            console.log(newSrc);
            $logo.attr('src', newSrc);
            setTimeout(frame, 1000);
        }
    }

    frame();
});

http://jsfiddle.net/DgZ4M/

The problem with your script was in the use of .delay. It's only useful when chaining jQuery UI animations, not arbitrary delays. The jQuery documentation clearly says that

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

Upvotes: 5

Ivan
Ivan

Reputation: 3645

First of all you need to preload all the images. Second - doing animations with sequence of jpgs is a bad idea :)

Upvotes: -1

Related Questions