我创建了一个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);
});
答案 0 :(得分:0)
以下是我的烹饪方法。看看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();