javascript - 我如何对这个扩展了 onclick 的 div 使用缓动效果，以及对其中的元素淡入淡出效果？

Question

我有两个问题，

1) 我有一个扩展 onclick 的 div，(.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;
 }

这是 fiddle 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);
 });
});