Question

我有两个div，一个是带有＆＃39; logo＆＃39;类和第二个是列表。单击列表中的元素时，列表应淡出，徽标应向上滑动某个像素。

这是我的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');
    });
});

使用此代码，列表会同时向下滑动和淡入淡出。如何使列表仅褪色，徽标只滑落？

Answer 1

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

Demo

$(function () {

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

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

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

否则它将与.animate()同步执行（异步）。

Answer 2

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

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

列表是淡入淡出和滑动，而不是仅仅是褪色和滑动以上的div

2 个答案: