单击的第二个项目无法正常工作

Question

我创建了一个 jquery 代码，由于某种原因第一次可以工作，但点击的第二个项目与其他项目错开，而点击的第一个项目仍然可见。这很奇怪。实际上我设置变量和使用它们的方式应该意味着只有点击的项目会留下来，而其他项目会错开。

知道发生了什么吗？

这里是 jsfiddle，您可以在其中看到正在运行的代码： http://jsfiddle.net/HCY5m/33/

我的 javascript 代码：

  var children = $('.icons').children();
  var icons = new TimelineLite({paused:true});

children.click(function(event) {
      var siblings = $(this).siblings()
      span = $(this).find("span").first()
      content = $(this).find("div")
      h1 = content.find("h2")
      li = content.find("li")
      clicks =  $(this).data('clicks');
      icons.staggerTo(siblings, 1.3, {left:"-150%", ease:Back.easeIn}, 0.1)

  if (clicks) {
     TweenMax.to(span, 1, {opacity:0, ease:Power2.easeInOut})
     TweenMax.to(content, 1, {display:"none", delay:1.5, ease:Power2.easeInOut})
     TweenMax.to(h1, 1, {opacity:0, ease:Power2.easeInOut})
     TweenMax.to(li, 1, {opacity:0, ease:Power2.easeInOut})
     setTimeout(function(){ icons.reverse(); }, 500);
  } else {
     TweenMax.to(span, 1, {opacity:0, delay:1.5, ease:Power2.easeInOut})
     TweenMax.to(content, 0, {display:"block", delay:1.5, ease:Power2.easeInOut})
     TweenMax.to(h1, 1, {opacity:1, delay:1.5, ease:Power2.easeInOut})
     TweenMax.to(li, 1, {opacity:1, delay:1.5, ease:Power2.easeInOut})
     TweenMax.to(this, 1, {width:"46%", top:"2em", left:"-2%", delay:1.5, ease:Power2.easeInOut})
     icons.play()
  }
  $(this).data("clicks", !clicks);
});

Answer 1

下面是我能做的。看看JSFiddle I created here，如果有什么不清楚的地方请告诉我。这是相同的 JavaScript 代码，没有更改 HTML 或 CSS 中的任何内容：

var APP={};
APP.icons=null;
APP.currentActiveIcon=APP.previousActiveIcon= -1;
APP.moveOutTimelines=APP.focusInTimelines=[];
APP.moveOutDuration=.8;
APP.focusInDuration=.6;
APP.moveOutEase=Back.easeIn;
APP.focusInEase=Power2.easeInOut;
APP.init=function(){
    APP.icons=document.querySelectorAll('.icon');
    APP.initFocusInTweens();
    APP.initMoveOutTweens();
    APP.initListeners();
};
APP.initListeners=function(){
    for(var i=0; i<APP.icons.length; i+=1){
        (function(index){
            (window.addEventListener)?APP.icons[i].addEventListener('click',function(event){APP.onIconClicked(event,index);},false):APP.icons[i].attachEvent('onclick',function(event){APP.onIconClicked(event,index);});
        })(i);
    }
};
APP.initFocusInTweens=function(){
    var span,content,header,listItems;
    for(var i=0; i<APP.icons.length; i+=1){
        span=APP.icons[i].querySelector('span');
        content=APP.icons[i].querySelector('div');
        header=content.querySelector('h2');
        listItems=content.querySelectorAll('li');
        APP.focusInTimelines[i]=new TimelineMax({
            paused:true,
            onStartParams:[content],
            onReverseCompleteParams:[content],
            onStart:function(content){TweenMax.set(content,{display:'block'});},
            onReverseComplete:function(content){TweenMax.set(content,{clearProps:'display'});}
        });
        APP.focusInTimelines[i].to(APP.icons[i],APP.focusInDuration,{width:'46%',top:'2em',left:'-2%',ease:APP.focusInEase},0);
        APP.focusInTimelines[i].fromTo(span,APP.focusInDuration,{autoAlpha:1},{autoAlpha:0,ease:APP.focusInEase},APP.focusInDuration*.4);
        APP.focusInTimelines[i].fromTo(header,APP.focusInDuration,{autoAlpha:0},{autoAlpha:1,ease:APP.focusInEase},APP.focusInDuration*.4);
        APP.focusInTimelines[i].staggerFromTo(listItems,APP.focusInDuration,{autoAlpha:0},{autoAlpha:1,ease:APP.focusInEase},APP.focusInDuration*.2,APP.focusInDuration*.4);
    }
};
APP.initMoveOutTweens=function(){
    for(var i=0; i<APP.icons.length; i+=1){
        APP.moveOutTimelines[i]=new TimelineMax({paused:true});
        APP.moveOutTimelines[i].to(APP.icons[i],APP.moveOutDuration,{left:'-30%',ease:APP.moveOutEase});
    }
};
APP.onIconClicked=function(event,index){
    APP.previousActiveIcon=APP.currentActiveIcon;
    APP.currentActiveIcon=index;
    if(APP.currentActiveIcon!==APP.previousActiveIcon){
        APP.toggleFocus(true);
    }else{
        APP.toggleFocus(false);
        APP.currentActiveIcon= -1;
    }
};
APP.toggleFocus=function(toFocus){
    var i;
    if(toFocus){
        if(APP.focusInTimelines[APP.previousActiveIcon]!==undefined)APP.focusInTimelines[APP.previousActiveIcon].reverse();
        APP.focusInTimelines[APP.currentActiveIcon].play();
        for(i=0; i<APP.icons.length; i+=1){
            if(i!==APP.currentActiveIcon)APP.moveOutTimelines[i].play();
        }
    }else{
        APP.focusInTimelines[APP.currentActiveIcon].reverse();
        for(i=0; i<APP.icons.length; i+=1){
            if(i!==APP.currentActiveIcon)APP.moveOutTimelines[i].reverse();
        }
    }
};
APP.init();