Второй элемент нажал не работает должным образом

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, который я создал здесь, и дайте мне знать, если что-то неясно. Вот тот же код 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();