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

          });

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

3 个答案: