代码之家 › 专栏 › 技术社区 › WebSon

Jquery慢速隐藏/显示文本、照片、对象等。最小高度200px

show hide jquery javascript

WebSon · 技术社区 · 7 年前

下面是一个脚本:

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

2 回复 | 直到 7 年前

mscdeveloper 7 年前

$( 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>

mscdeveloper 7 年前

也许是这样?

$( 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>