Question

我有两个问题，

1）我有一个扩展onclick的div，（。panel）如何在其上使用缓动，以便以平滑的方式打开？

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

<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/

它使用默认缓动，但您可以将其更改为您想要的正确方式。请参阅此处的文档：http://api.jquery.com/animate/

如何对这个扩展onclick的div使用缓动效果，以及淡化其内部元素的效果？

2 个答案: