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

时间:2013-11-08 19:54:03

标签: javascript jquery animation blink

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

如果您有兴趣,这是最新的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,现在它已经运行得很好,除了来回切换几次后订单不正确。

3 个答案:

答案 0 :(得分:2)

这可能会更容易

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

答案 1 :(得分:1)

这是我想出来的,但我必须这样做,所以我无法继续提供帮助。

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

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

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

答案 2 :(得分:0)

您忘记从 page1 中删除隐身类,这可行。

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

          });