Jquery langsames Verstecken/zeigen Sie Text, Foto, Objekt, etc. Min-Höhe 200px

Question

Haben Sie etwas jquery-Skript, das einige Texte, Objekte, Fotos usw. verstecken muss. Das Skript versteckt alles, aber ich muss nur 200px zeigen, dann nach dem Klicken auf "mehr" - zeige 100%. (jquery lib ich schließe ein) Was mache ich falsch? Vielen Dank an alle. Hier

ist ein Skript:

<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

vielleicht so?

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