display animation every time clicks a button using jQuery

Question

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/

---

I am trying to make a page where it display different section based on users choice. When you click one button, it shows two objects in animated order, one object would appear after another. This effect needs to be repeat every time you click the corresponding button. Now the problem is that when user switches between two buttons, the blink animation won't always show the correct order of objects.

here is the functions i used:

    $(document).ready(function()
    {   

          function blinkObject () {
              $('.blink').fadeTo(0,0);//hide at first
              $('.blink').each(function(i) {//for each blink
                 $(this).delay(i*1500).animate({opacity: '1'}, 1000);
                  });

      }

          $("#b1").click(function(){
             $('.blink').stop(true,true);
                 $(".page1").css({"display": "block"}); 
                 $(".page2").css({"display": "none"}); //
                 blinkObject ();

          });

          $("#b2").click(function(){
            $('.blink').stop(true,true);
                $(".page1").css({"display": "none"}); 
                $(".page2").css({"display": "block"}); //
                blinkObject ();
          });

     });

Here is the jsfiddle: http://jsfiddle.net/6UjF3/3/

ps: i updated the jsfiddle with one of the answers and now it has been working pretty well, except the order will be incorrect after switch back and forth a few times.

Answer 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/

Answer 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/

Answer 3

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

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

          });