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.

I think I got all the issues fixed, and everything simplified. Not only should it work great no matter how many times you go back and forth, it won't build up the queue if you click one of them rapidly. — FiLeVeR10, Nov 09 '13 at 01:36

FiLeVeR10 · Accepted Answer · 2013-11-09T02:03:28.803

2

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/

edited Nov 09 '13 at 02:03

answered Nov 09 '13 at 00:09

FiLeVeR10

2,155
1
12
13

seemed like you had some extra css and html, so I cleaned that up as well. – FiLeVeR10 Nov 09 '13 at 00:36
anytime, glad it helped! – FiLeVeR10 Nov 11 '13 at 17:56

score 1 · Answer 2 · answered Nov 08 '13 at 20:26

1

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/

answered Nov 08 '13 at 20:26

Kierchon

2,271
1
19
24

thanks for the really helpful stop() function! it kills the messy line of animation and restored it back to simply start from beginning. however, it will show incorrectly after testing a few times. i will keep looking for a solution to this matter. Again, thanks for your valuable input. – BigGirl1017 Nov 08 '13 at 23:00
1

behavior also breaks on rapid click. `stop(true,true)` helps, but doesn't fix the issue. – FiLeVeR10 Nov 09 '13 at 02:13

score 0 · Answer 3 · answered Nov 08 '13 at 20:02

0

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

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

          });

answered Nov 08 '13 at 20:02

Sid M

4,354
4
30
50

This is one of the problems but there are definitely more – Kierchon Nov 08 '13 at 20:03
kindly enlighten on other problems? – Sid M Nov 08 '13 at 20:06
The animations are all messed up. They come in out of order, overlap, and on different time intervals – Kierchon Nov 08 '13 at 20:12
@Kierchon agree with you that there are more problems. if you keep switching from one button to another, it can't display objects correctly. the order shall always be the same – BigGirl1017 Nov 08 '13 at 20:14

display animation every time clicks a button using jQuery

3 Answers3

Linked