jquery缓慢隐藏/显示文本，照片，对象等最小高度200px

问题描述：

有一些jquery脚本，必须隐藏一些文本，对象，照片等。脚本隐藏一切，但我需要显示只有200px，然后点击“更多” - 显示100％。（我包括jquery lib）我做错了什么？感谢所有人。jquery缓慢隐藏/显示文本，照片，对象等最小高度200px

这里是一个脚本：

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

答

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

谢谢。但您的示例隐藏一切，点击更多，您的脚本显示只有200px，但我需要最初必须200px，比单击“更多”后 - 显示所有隐藏之前 –

更正的答案... – mscdeveloper

没有任何更改。一切都隐藏起来。当“显示”点击功能“更少”不起作用。也许你对我的例子有另一个desicion？ –

答

也许这样的吗？

$(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(){ 
 
    \t   $("#hello_less").animate({height:200, opacity:1},600); 
 
      }); 
 
    }); 
 
    }); 
 

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

 

 
});

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

no no no no ...在“bigtext”中有一个带有一些照片，文字，对象的div –

也许这样？............... – mscdeveloper

jquery缓慢隐藏/显示文本，照片，对象等最小高度200px

相关推荐