Question

请参阅我设置的fiddle。

您首先遇到三个链接。每个链接都会触发div滑出。

链接'john smith'以我们想要的速度滑出。当它滑出时，第一条线滑出，然后当它完成时，第二条线向下滑动，就像从第一条线开始一样。当它向后滑动时，它以相同的速度进行相同的运动，但反向，即第二条线首先向上滑动，然后当完成时，第一条线向后滑动。
当您点击工作链接时，菜单会以与bio相同的方式滑出。此外，还有一个子菜单在点击第2项时滑出。
当用户点击联系人链接时，一行会滑出。

我们需要实现的是这一点;当任何div打开并且单击另一个链接时，可见div会向后滑动以反转它们滑入的方式。我们几乎实现了这一点，但是，代码不太正确，因为div不会同时滑回速度和顺序，他们只是快速滑回。例如，如果单击“工作”和“项目2”链接，然后选择“联系”，则打开的div会很快滑回。我需要实现的是它们向后滑动以反转它们滑出的方式。

要尝试清楚说明，如果单击“工作”，然后单击“项目2”，以便菜单可见，然后再次单击工作，您将看到子菜单在第一个菜单之前先滑开。您还会注意到，向上滑动的项目会在div向左滑动之前向下滑回。如果在菜单可见时单击“联系人”或“约翰史密斯”，则需要执行此操作。

我知道这听起来非常复杂，如果我能回答任何问题，我会更清楚。

由于

$('#bio-line-1').animate({width: 'hide'});
$('#contact-info').animate({right: 'hide'});
$('#bio-line-2').slideUp("fast");
$('#black-div, #black-credits, #igna-1-div, #igna-1-credits, #igna-2- div, #igna-2-credits, #fatal-div, #fatal-credits').fadeOut('100');

}）;

Answer 1

你可以使用.setTimeout()来延迟一些

setTimeout(function () {
        $('#contact-info').animate({right: 'toggle'});
    }, 500);

DEMO

Answer 2

DEMO

我终于弄清楚如何修复它以实现我的预期，但是我的代码很长。我意识到必须有一种方法可以通过使用泛型函数来减少代码的重复。我现在将工作代码发布到Code Review以进行进一步开发。

$('#menu').click(function () {
if ( $('#igna-1').css('display') != 'none' ) {
    $('#igna-1').slideToggle("fast", function() {
        $('#igna-2').animate({ left: 'hide' }, 300, function() {
            $('#black, #igna, #igna-1').slideUp("fast", function() {
                $('#fatal, #igna-2').animate({ left: 'hide' }, 300);
            });

Answer 3

虽然我发现你找到了解决方案，但是当我开始编写 TweenMax 版本时，我继续完成它。我建议 GSAP 的原因应该是网络动画的首选工具，不仅仅是因为它很疯狂fast，或者很容易jump-start或获得{{ 3}}使用或started coolest animation可以使用几行代码（我可以effects）...但是它就像它一样直观可以得到。

回到动画，我已将您的动画解决方案完全转换为使用go on and on / TimelineMax，其片段如下：

/*global TweenMax,TimelineMax,Power2,Power0*/
var getElementById=document.getElementById.bind(document);
var nameA=getElementById('name-a'),menu=getElementById('menu'),contact=getElementById('contact');
var contactInfo=getElementById('contact-info'),contactInfoAnchor=contactInfo.querySelector('a');
var igna=getElementById('igna'),ignaAnchor=igna.querySelector('a');
var ignaOne=getElementById('igna-1'),ignaOneAnchor=ignaOne.querySelector('a');
var ignaTwo=getElementById('igna-2'),ignaTwoAnchor=ignaTwo.querySelector('a');
var black=getElementById('black'),blackAnchor=black.querySelector('a');
var fatal=getElementById('fatal'),fatalAnchor=fatal.querySelector('a');
var bioLineOne=getElementById('bio-line-1'),bioLineOneParagraph=bioLineOne.querySelector('p');
var bioLineTwo=getElementById('bio-line-2'),bioLineTwoParagraph=bioLineTwo.querySelector('p');
var tlName=getTimeline(),tlContact=getTimeline(),tlWork=getTimeline(),tlIgnaTwo=getTimeline(),tlWorkIgnaTwoCombined=getTimeline();
var isTlNameDirectionForward=false,isTlContactDirectionForward=false,isTlWorkDirectionForward=false,isTlIgnaTwoDirectionForward=false,reverseTimeScale=1;
var duration=.4,easeInOut=Power2.easeInOut,easeOut=Power2.easeOut,easeIn=Power2.easeIn,easeNone=Power0.easeNone;
function init(){
	setTlName();
	setTlContact();
	setTlWork();
	setTlIgnaTwo();
	setTlWorkIgnaTwoCombined();
	assignListeners();
}
function setTlName(){
	addParentDIVsToTimeline(tlName,[bioLineOne,bioLineTwo],['rect(10px 633px 50px 0px)','rect(10px 633px 50px 0px)']);
	tlName.fromTo(bioLineOneParagraph,duration,{x:-633},{x:0,ease:easeOut,clearProps:'x'},0).fromTo(bioLineTwoParagraph,duration,{y:-40},{y:0,ease:easeOut,clearProps:'y'},duration*.3);
}
function setTlContact(){
	addParentDIVsToTimeline(tlContact,[contactInfo],['rect(0px 120px 20px 0px)']);
	tlContact.fromTo(contactInfoAnchor,duration,{display:'block',x:150},{display:'block',x:0,ease:easeOut,clearProps:'display, x'},0);
}
function setTlWork(){
	var fromProps={display:'block',y:40},toProps={display:'block',y:0,ease:easeOut,clearProps:'display, y'};
	addParentDIVsToTimeline(tlWork,[fatal,igna,black],['rect(0px 120px 20px -90px)','rect(0px 120px 26px 0px)','rect(0px 120px 26px 0px)']);
	tlWork.fromTo(fatalAnchor,duration,{display:'block',x:-150},{display:'block',x:0,ease:easeOut,clearProps:'display, x'},0).fromTo(ignaAnchor,duration,fromProps,toProps,duration*.3).fromTo(blackAnchor,duration,fromProps,toProps,duration*.6);
}
function setTlIgnaTwo(){
	addParentDIVsToTimeline(tlIgnaTwo,[ignaTwo,ignaOne],['rect(0px 120px 20px -90px)','rect(0px 120px 26px 0px)']);
	tlIgnaTwo.fromTo(ignaTwoAnchor,duration,{display:'block',x:-150},{display:'block',x:0,ease:easeOut,clearProps:'display, x'},0).fromTo(ignaOneAnchor,duration,{display:'block',y:40},{display:'block',y:0,ease:easeOut,clearProps:'display, y'},duration*.3);
}
function setTlWorkIgnaTwoCombined(){
	tlWorkIgnaTwoCombined.to(tlIgnaTwo,duration,{progress:0,ease:easeNone},0).to(tlWork,tlWork.totalDuration(),{progress:0,ease:easeNone},duration*.3);
}
function assignListeners(){
	nameA.addEventListener('click',onNameAClicked,false);
	menu.addEventListener('click',onMenuClicked,false);
	contact.addEventListener('click',onContactClicked,false);
	igna.addEventListener('click',onIgnaClicked,false);
	ignaOneAnchor.addEventListener('click',playTlWorkIgnaTwoCombined,false);
	ignaTwoAnchor.addEventListener('click',playTlWorkIgnaTwoCombined,false);
	black.addEventListener('click',onMenuClicked,false);
	fatal.addEventListener('click',onMenuClicked,false);
}
function onNameAClicked(){
	isTlNameDirectionForward=!isTlNameDirectionForward;
	isTlNameDirectionForward?tlName.timeScale(1).play():tlName.timeScale(1).reverse();
	reverseTlContact();
	if(isTlIgnaTwoDirectionForward){playTlWorkIgnaTwoCombined();}else if(isTlWorkDirectionForward){reverseTlWork();}
}
function onMenuClicked(){
	isTlWorkDirectionForward=!isTlWorkDirectionForward;
	isTlWorkDirectionForward?tlWork.timeScale(1).play():tlWork.timeScale(1).reverse();
	reverseTlContact();
	reverseTlName();
	if(isTlIgnaTwoDirectionForward){playTlWorkIgnaTwoCombined();}
}
function onContactClicked(){
	isTlContactDirectionForward=!isTlContactDirectionForward;
	isTlContactDirectionForward?tlContact.timeScale(1).play():tlContact.timeScale(1).reverse();
	reverseTlName();
	if(isTlIgnaTwoDirectionForward){playTlWorkIgnaTwoCombined();}else if(isTlWorkDirectionForward){reverseTlWork();}
}
function onIgnaClicked(){
	isTlIgnaTwoDirectionForward=!isTlIgnaTwoDirectionForward;
	isTlIgnaTwoDirectionForward?tlIgnaTwo.timeScale(1).play():tlIgnaTwo.timeScale(1).reverse();
}
function addParentDIVsToTimeline(tl,parents,clipRects){
	var length=parents.length;
	for(var i=0;i<length;i+=1){tl.fromTo(parents[i],duration,{display:'none',clip:clipRects[i]},{display:'block',clip:clipRects[i],ease:easeOut,clearProps:'clip'},duration*.3*i);}
}
function getTimeline(){return new TimelineMax({paused:true});}
function reverseTlContact(){
	if(isTlContactDirectionForward){
		isTlContactDirectionForward=false;
		tlContact.timeScale(reverseTimeScale).reverse();
	}
}
function reverseTlName(){
	if(isTlNameDirectionForward){
		isTlNameDirectionForward=false;
		tlName.timeScale(reverseTimeScale).reverse();
	}
}
function reverseTlWork(){
	isTlWorkDirectionForward=false;
	tlWork.timeScale(reverseTimeScale).reverse();
}
function playTlWorkIgnaTwoCombined(){
	isTlIgnaTwoDirectionForward=isTlWorkDirectionForward=false;
	tlWork.pause(tlWork.totalTime());
	tlIgnaTwo.pause(tlIgnaTwo.totalTime());
	tlWorkIgnaTwoCombined.pause(0).play();
}
//
init();

#name-a {
	left: 38px;
	position: fixed;
	top: 38px;
	z-index: 1;
}
#bio-line-1 {
	left: 150px;
	position: fixed;
	top: 35px;
	width: 633px;
	z-index: 1;
}
#bio-line-1 p {
	color: #333333;
	display: block;
	float: right;
	font-size: 16px;
	line-height: 21px;
	width: 552px;
}
#bio-line-2 {
	left: 150px;
	margin-top: 20px;
	position: fixed;
	top: 38px;
	width: 633px;
	z-index: 1;
}
#bio-line-2 p {
	color: #333333;
	display: block;
	float: right;
	font-size: 16px;
	line-height: 21px;
	width: 552px;
}
#menu {
	bottom: 34px;
	left: 38px;
	position: fixed;
	z-index: 4;
	background-color: #ffffff;
}
#contact {
	bottom: 34px;
	position: fixed;
	right: 38px;
	z-index: 1;
	background-color: #ffffff;
}
#contact-info {
	bottom: 34px;
	margin-right: 38px;
	position: fixed;
	right: 160px;
	text-transform: lowercase;
	white-space: nowrap;
}
.hidden {
	display: none;
}
#fatal {
	bottom: 34px;
	float: right;
	left: 135px;
	margin-left: 36px;
	position: fixed;
	white-space: nowrap;
	z-index: 1;
}
#black {
	bottom: 61px;
	float: right;
	left: 171px;
	margin-bottom: 18px;
	position: fixed;
	white-space: nowrap;
	z-index: 1;
}
#igna {
	bottom: 52px;
	float: right;
	left: 171px;
	margin-bottom: 5px;
	position: fixed;
	white-space: nowrap;
	width: 270px;
	z-index: 1;
}
#igna-1 {
	bottom: 72px;
	left: 404px;
	margin-bottom: 7px;
	position: fixed;
	white-space: nowrap;
	width: 162px;
	z-index: 1;
}
#igna-2 {
	bottom: 57px;
	left: 82px;
	margin-left: 321px;
	position: fixed;
	white-space: nowrap;
	width: 162px;
	z-index: 1;
}
.sub-menu {
	white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<div id="name-a"><a href="#">John Smith</a></div>
<div id="menu"><a href="#">Work</a></div>
<div id="contact"><a href="#">Contact</a></div>
<div class="hidden" id="contact-info"><a href="#">conatct@foo.com</a></div>
<div class="hidden hover" id="black"><a href="#">item 1</a></div>
<div class="hidden hover" id="igna"><a href="#">item 2</a></div>
<div class="hidden hover" id="fatal"><a href="#">item 3</a></div>
<div class="hidden hover" id="igna-1"><a href="#">S/S <span id="ss">15</span></a></div>
<div class="hidden hover" id="igna-2"><a href="#">A/W 14</a></div>
<div id="bio-line-1" class="hidden"><p>holds a Master's Degree from the University of the Arts London</p></div>
<div id="bio-line-2" class="hidden"><p>and currently works foo bar.</p></div>

希望你能以某种方式发现它有用。

进一步阅读：

P.S。上面的例子可能没有对图书馆公正。我的代码中可能存在错误，或者这种方法可能看起来过于复杂，但这些不应该从这个GreenSock动画平台中拿走信用。喜欢这个工具。

Ť

多个滑动div的计时和速度

3 个答案: