Display Animation Every Time Clicks A Button Using JQuery

This issue has been solved by changing the blink function to include an ordering to all objects. Here is the latest jsfiddle in case you're interested. http://jsfiddle.net/6UjF3/4

Solution 1:

this might be easier

jQuery

function blinkObject(p) {
    $('.page').eq(p).show().children('.blink').stop(false,true).each(function(i) {//for each blink
        $(this).stop(true,false).fadeTo(0,0).delay(i*1000).animate({opacity: '1'}, 1000);//fadein
    }).end().siblings('.page').hide();//hide siblings
}

$('.page').first().siblings('.page').hide();//hide all but first

$(".but").each(function(i){
    $(this).on('click', function() {
        blinkObject(i);//run blink
    });
});

I added a class of page on the pages, and a class of but on the buttons.

made a fiddle: http://jsfiddle.net/filever10/rruM9/

Solution 2:

Here what I came up with but I have to go so I cant help any further.

$("#b1").click(function(){
    $('.blink').stop(true,true);
    $(".page1").removeClass("invisible"); 
    $(".page1").addClass("visible"); //
    $(".page2").removeClass("visible"); //
    blinkObject ();        
});

The key is the stop(). This will stop other animations from running and make it switch smoother.

http://jsfiddle.net/6UjF3/2/

Solution 3:

You forgot to remove invisible class from page1, this works.

$("#b1").click(function(){
             $(".page1").removeClass("invisible");
             $(".page1").addClass("visible"); //
             $(".page2").removeClass("visible"); //
                 blinkObject ();

          });