多个滑动div的时间和速度

Question

请看这个fiddle我设置好了

您首先遇到三个 link。每个 link 触发 div 滑出。

link 'john smith' 以我们想要的速度滑出和滑入。当它滑出时，第一条线滑出，然后第二条线滑出，就好像来自第一条线一样。当它向后滑动时，它以相同的速度做相同的运动，但相反，即第二条线先向上滑动，然后当完成后，第一条线向左滑动。
当您点击作品时 link 菜单会以与简介相同的方式滑出。还有一个子菜单会在点击项目 2 时滑出。
当用户点击联系人时 link 一行滑出。

我们要实现的是这个；当打开任何 div 并单击另一个 link 时，可见的 div 会按照它们滑入的方式向后滑动。我们几乎已经实现了这一点，但是，代码还不够由于 div 没有以相同的速度和正确的顺序滑回，它们只是快速滑回。例如，如果一个人点击了 'work' 和 'item 2' link，然后你 select 'contact' 打开的 div 很快滑回来.我需要实现的是，它们以与滑出方式相反的方式滑回。

为了清楚起见，如果您单击 'work'，然后单击 'item 2'，这样菜单就可见了，然后再次单击工作，您会看到子菜单先滑开，然后第一个菜单。您还会注意到，向上滑动的项目在 div 向左滑动之前先向下滑动。如果在菜单可见时单击 'contact' 或 'john smith'，则需要发生这种情况。

我知道这听起来很复杂，如果我能回答任何问题以使其更清楚，我会的。

谢谢

$('#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

我终于弄清楚了如何修复它以按我的预期工作，但是我的代码非常冗长。我意识到必须有一种方法可以通过使用通用函数来减少代码的重复。我现在 post 将工作代码提交到 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 应该成为 web 动画的首选工具的原因不仅仅是因为它很疯狂 fast, or easy to jump-start or get started with, or makes some of the coolest animation effects possible with few lines of code (I can go on and on) ...它可以得到。

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

/*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 动画平台的功劳。喜欢这个工具。

T

多个滑动div的时间和速度

Timing and speed of multiple sliding divs

javascript

jquery

html

css

jquery-animate