Jquery 慢 hiding/show 文本、照片、对象等最小高度 200px

Question

有一些 jquery 脚本必须隐藏一些文本、对象、照片等。脚本隐藏所有内容，但我只需要显示 200px，然后单击 "more" - 显示 100 %。 (jquery lib i include) 我做错了什么？谢谢大家。

这是一个脚本：

 <span id="hello-bigtext">Some big text, objects, photos, etc</span>
 <div id="hello-more">more</div>
 <div id="hello-less" >less</div>


<script>
$("#hello-bigtext").hide("slow");
$("#hello-less").hide("slow");

$("#hello-more").click( function() {
    $("#hello-bigtext").show("slow");
    $("#hello-less").show("slow");
    $("#hello-more").hide("slow");
});

$("#hello-less").click( function() {
    $("#hello-bigtext").hide("slow");
    $("#hello-less").hide("slow");
    $("#hello-more").show("slow");
});
</script>

Answer 1

$( document ).ready(function(){
  $("#hello_bigtext").slideUp(600);
  $("#hello_less").slideUp(600);

  $("#hello_more").click( function() {
    $("#hello_bigtext").slideDown(600);
    $("#hello_less").slideDown(600);
    $("#hello_more").slideUp(600);
  });

  $("#hello_less").click( function() {
    $("#hello_bigtext").slideUp(600);
    $("#hello_less").slideUp(600);
    $("#hello_more").slideDown(600);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div id="hello_bigtext" style="border-style:solid; height:200px; background-color:red; cursor:pointer;">Some big text, objects, photos, etc</div>
 <div id="hello_more" style="border-style:solid; height:200px; background-color:Yellow; cursor:pointer;">more</div>
 <div id="hello_less" style="border-style:solid; height:200px; background-color:green; cursor:pointer;">less</div>

Answer 2

也许是这样？

$( document ).ready(function(){
  $("#hello_bigtext").animate({height:0 , opacity:0},600);
  $("#hello_more").animate({height:200, opacity:1},600);
  $("#hello_less").animate({height:0 , opacity:0},600);

  $("#hello_more").click( function() {
     $("#hello_more").animate({height:0, opacity:0},600,function(){
          $("#hello_bigtext").animate({height:200, opacity:1},600,function(){
             $("#hello_less").animate({height:200, opacity:1},600);
           });
     });
  });

  $("#hello_less").click( function() {
     $("#hello_bigtext").animate({height:0, opacity:0},600,function(){
        $("#hello_less").animate({height:0, opacity:0},600,function(){
               $("#hello_more").animate({height:200, opacity:1},600);
        });
     });
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div id="hello_bigtext" style="border-style:solid; height:400px; background-color:red; cursor:pointer;">Some big text, objects, photos, etc</div>
 <div id="hello_more" style="border-style:solid; height:400px; background-color:Yellow; cursor:pointer;">more</div>
 <div id="hello_less" style="border-style:solid; height:400px; background-color:green; cursor:pointer;">less</div>

Jquery 慢 hiding/show 文本、照片、对象等最小高度 200px

Jquery slow hiding/show text, photo, object, etc. Min-height 200px

javascript

jquery

show

hide