javascript - 多个滑动div的时间和速度

Question

请看这个fiddle我已经设置好了。

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

1. “john smith”链接以我们想要的速度滑出和滑入。当它滑出时，第一条线滑出，然后第二条线滑出，就好像来自第一条线一样。当它向后滑动时，它以相同的速度做相同的运动，但相反，即第二条线先向上滑动，然后当完成后，第一条线向左滑动。

2. 当您点击工作链接时，菜单会以与简历相同的方式滑出。还有一个子菜单会在点击元素 2 时滑出。

3. 当用户点击联系人链接时，一行会滑出。

我们需要实现的是这个；当打开任何 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