如何将缓动效果用于展开onclick的div，以及淡入淡出对其中的元素的影响？

Question

我有两个问题，

1）我有一个div扩展onclick，（.panel）如何使用缓动，因此它以平稳的方式打开？

2）如何扩展div（.panel）内的ul列表在div展开后的几毫秒内淡入？

<div id="effect" class="mores" style="background-color: brown"> 
<div class="panel">click 
    <ul> 
     <li>Coffee</li> 
     <li>Tea</li> 
     <li>Milk</li> 
    </ul> 
</div> 

JS

var next_move = "expand"; 
$(document).ready(function() { 
$(".panel").click(function() { 
    console.log(next_move); 
    var css = {}; 
    if (next_move == "expand") { 
     css = { 
      width: '210px', 
      height: '170px' 
     }; 
     next_move = "shrink"; 
    } else { 
     css = { 
      width: '30px', 
      height: '20px' 
     }; 
     console.log('hi'); 
     next_move = "expand"; 
    } 
    $(this).animate(css, 200); 
}); 
}); 




    .panel { 
     width: 30px; 
     height: 21px; 
     overflow: hidden; 
     color:white; 
     background-color: grey; 
    } 
     .panel ul { 
     margin-left:10%; 
     color:white; 
} 
     .mores { 
     width: 210px; 
     height: 170px; 
     overflow: hidden; 
} 

这里是小提琴JSFiddle

非常感谢

Answer 1

我试过的东西，告诉我，如果这是你所期望的。 http://jsfiddle.net/z2p0r5s9/11/

<div id="effect" class="mores" style="background-color: brown"> 
<div class="panel">click 
    <ul style="display:none"> 
     <li>Coffee</li> 
     <li>Tea</li> 
     <li>Milk</li> 
    </ul> 
</div> 

CSS

.panel { 
    width: 30px; 
    height: 21px; 
    overflow: hidden; 
    color:white; 
    background-color: grey; 
    transition: all 2s ease; 
} 

JS

var next_move = "expand"; 
$(document).ready(function() { 
$(".panel").click(function() { 
    console.log(next_move); 
    var css = {}; 
    if (next_move == "expand") { 
     css = { 
      width: '210px', 
      height: '170px' 
     }; 
     next_move = "shrink"; 
      setTimeout(function(){ 
      $('ul').fadeIn();     
     },2000); 
    } else { 
     css = { 
      width: '30px', 
      height: '20px' 
     }; 
     console.log('hi'); 
     next_move = "expand"; 

    } 
    $(this).animate(css, 200); 
}); 
}); 

Answer 2

这是你假装什么？

var next_move = "expand"; 
$(document).ready(function() { 
    $(".panel").click(function() { 
     console.log(next_move); 
     var css = {}; 
     if (next_move == "expand") { 
      css = { 
       width: '210px', 
       height: '170px' 
      }; 
      next_move = "shrink"; 
     } else { 
      css = { 
       width: '30px', 
       height: '20px' 
      }; 
      console.log('hi'); 
      next_move = "expand"; 
     } 
     $(this).animate(css, 200, function(){ 
      setTimeout(function() { 
       $(".options").fadeIn() 
       }, 75); 
     }); 
    }); 

}); 

http://jsfiddle.net/lycrest15/z2p0r5s9/2/

它使用的是默认缓解，但你可以把它改成你想要的正确方法。只是看到这里的文档：