CODEWITHSUNDEEP
jqueryjquery-uianimationinteractive
Zeus
Zeus

Reputation: 3357

Timed animation with jQuery

http://i28.tinypic.com/2j0zbxi.gif

Is this possible via jQuery ? Basically as shown in above image , I have blue background , map image and text images. I want to achieve this kind of animation at the page load or whenver this image is loaded.

Upvotes: 3

Views: 3860

Answers (4)

harkmylord
harkmylord

Reputation: 58

You'll want to use a combination of animate() and delay() to time each slide just right. Here's an example of what I recently put together using this.

http://www.panthersweat.com/thursday/

Upvotes: 4

Peter Smeekens
Peter Smeekens

Reputation: 664

Since 1.4 jQuery has the .delay() function u can use in animations. Perhaps that's what you need?

Upvotes: 1

Jaison Justus
Jaison Justus

Reputation: 2793

yes you can do it by mixing javscript and jquery... i have did something in a banner some time before..

the code follows

var timerCount = 1;
var timer = setInterval('sliderController()',5000);


function sliderController() {
    status = changeSlide(timerCount);
    if(status == 1) {
        timerCount++;
    }
    else{
        timerCount = 1;
    }
}

function changeSlide(timerCount)    {
    if(timerCount != 3) {
        leftValue = -1004 * timerCount;
        $('#banner_slider_container #banner_slides_container').stop().animate({'left':leftValue,'opacity':0.3},'slow',function()    {
            $('#banner_slider_container #banner_slides_container').animate({'opacity':1},'slow');
        });
        return 1;
    }
    else    {
        leftValue = 0;
        $('#banner_slider_container #banner_slides_container').stop().animate({'left':leftValue,'opacity':0.3},'slow',function()    {
            $('#banner_slider_container #banner_slides_container').animate({'opacity':1},'slow');
        });
        return 0;
    }

}

i think this will help you.......

Upvotes: 2

Joonas Trussmann
Joonas Trussmann

Reputation: 1064

Basically that's what jQuery's .animate() is for. You'll have to express every necessary animation state/step with CSS, but a simple animation like the one above shouldn't be a problem.

http://api.jquery.com/animate/

Upvotes: 1

Related Questions