列表是淡出滑动的，而不是只有淡出和滑动上面的一个div答案

【问题标题】：List is fading and sliding, instead of only fading and a div above sliding列表是淡出滑动的，而不是只有淡出和滑动上面的一个div
【发布时间】：2016-01-30 00:14:35
【问题描述】：

我有两个 div，一个只是带有“logo”类的文本，第二个是列表。当单击列表中的元素时，列表应该淡出并且徽标应该向上滑动特定像素。

这是我的 HTML：

<nav class='mainnav'>
  <div class='logo'>logo</div>
  <div class='listcontainer'>
    <ul>
      <li><a href='#'>first link</a></li>
      <li><a href='#' class='second'>second link</a></li>
      <li><a href='#'>third link</a></li>
    </ul>
  </div>
</nav>

还有 jQuery：

$(document).ready(function(){
    $('.second').click(function(){
        $('.listcontainer').fadeOut('slow');
        $('.logo').animate({'height':'300px'},'slow');
    });
});

使用此代码，列表会同时向下滑动和淡出。如何让list只淡出，logo只下滑？

【问题讨论】：

如果我可以建议的话，使用 TimelineMax，它是 GSAP 工具套件的一部分，您可以获得很多控制权。看看 examples，codepen 上的 collections 或阅读 documentation，你会惊喜不已。 Here 是我刚刚创建的示例。

标签： jquery jquery-animate slide

【解决方案1】：

这里最好使用fadeOut()回调函数：

Demo

$(function () {

    $('.second').click(function() {

        $('.listcontainer').fadeOut('slow', function() {

             $('.logo').animate({height: 300}, 'slow');
        });;
    });
 });

否则会和.animate()同时执行（异步）。

【讨论】：

【解决方案2】：

列表正在向下“滑动”，因为您正在增加上方元素（徽标）的空间。要在 div 展开之前使列表淡出完成，请在淡出上使用 .promise().done() 函数：

 $(document).ready(function () {
     $('.second').click(function () {
         $('.listcontainer').fadeOut('slow').promise().done(function () {
             $('.logo').animate({
                 'height': '300px'
             }, 'slow');
         });;
     });
 });

【讨论】：