javascript - 每次使用jQuery单击按钮时显示动画

Question

此问题已通过更改闪烁功能以包括对所有对象的排序来解决。

如果您有兴趣，这是最新的 jsfiddle。 http://jsfiddle.net/6UjF3/4/

---

我正在尝试制作一个页面，根据用户的选择显示不同的部分。当您单击一个按钮时，它会以动画顺序显示两个对象，一个对象会一个接一个地出现。每次点击相应按钮时都需要重复此效果。现在的问题是，当用户在两个按钮之间切换时，闪烁动画并不总是显示正确的对象顺序。

这是我使用的功能：

    $(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 ();
          });

     });

这是jsfiddle：http: //jsfiddle.net/6UjF3/3/

ps：我用其中一个答案更新了jsfiddle，现在它工作得很好，除了来回切换几次后顺序会不正确。

Answer 1

这可能更容易

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
    });
});

我page在页面上添加了一个类，but在按钮上添加了一个类。

做了一个小提琴：http: //jsfiddle.net/filever10/rruM9/

Answer 2

这是我想出的，但我必须去，所以我无能为力。

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

关键是stop()。这将阻止其他动画运行并使其切换更平滑。

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

Answer 3

您忘记从page1中删除不可见的类，这是可行的。

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

          });