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

Posted 2023-05-08

【中文标题】列表是淡出滑动的，而不是只有淡出和滑动上面的一个div

【英文标题】：List is fading and sliding, instead of only fading and a div above sliding

【发布时间】：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 是我刚刚创建的示例。

【参考方案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');
         );;
     );
 );