显示动画每次点击使用jQuery按钮 [英] display animation every time clicks a button using jQuery

问题描述

此问题已被改变闪烁功能，包括排序的所有对象解决了。

This issue has been solved by changing the blink function to include an ordering to all objects.

下面是如果你有兴趣的最新的jsfiddle。
http://jsfiddle.net/6UjF3/4/

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.

这是我使用的功能：

    $(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/

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

PS：我更新的jsfiddle的答案之一，现在它已经工作pretty很好，除了订货会切换后不正确来回几次。

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.

推荐答案

这可能是更容易

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.

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

这篇关于显示动画每次点击使用jQuery按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！