A project would like to use jquery to do a jqueryui div element, suffering from the accordion did not provide relevant methods, they wrote a. Previously used jQueryUI found that can use the accordion all folded up, there is no way to set the minimum height of folding.
Code quality is very low, I hope that old birds can guide.
The image below is a display of the effect that can be contracted by a function of jquery
Copy Code code as follows:
Author:hlhr
require:jquery1.4 and above
function Animate_toggle_height (maxh,minh,maxo,mino,element,speed) {//This is portrait, parameter interpretation: maximum height, minimum height, maximum transparency, minimum transparency, element, animation speed
if (element.css ("height") ==minh.tostring (). Concat ("px")) {//If the minimum height is expanded
Element.animate ({
Height:maxh,
Opacity:maxo
},{queue:false},speed);
Return "Fold"
}
if (element.css ("height") ==maxh.tostring (). Concat ("px")) {//If the maximum height is folded
$ (this). html ("");
Element.animate ({
Height:minh,
Opacity:mino
},{queue:false},speed);
Return "Read more";
}
}
function Animate_toggle_width (maxw,minw,maxo,mino,element,speed) {
if (element.css ("width") ==minw.tostring (). Concat ("px")) {
Element.animate ({
WIDTH:MAXW,
Opacity:maxo
},{queue:false},speed);
Return "Fold"
}
if (element.css ("width") ==maxw.tostring (). Concat ("px")) {
Element.animate ({
WIDTH:MINW,
Opacity:mino
},{queue:false},speed);
Return "Read more";
}
}
Copy Code code as follows:
<script src= "Jquery-1.9.1.min.js" ></script><!--need jquery library-->
<script src= "Jqslider.js" ></script><!--links to the JS library above-->
<style>
body{margin:0 auto; text-align:center;}
. slide{font-size:20px; overflow:hidden; width:500px;}
#content {margin:0 auto; width:500px;}
. viewbutton{position:relative; text-align:right;}
</style>
<body>
<fieldset id= "Content" >
<div class= "Slide" >
<a class= "Viewbutton" href= "#" >
Read more
</a>
<p>slide!</p>
<p>slide!</p>
<p>slide!</p>
<p>slide!</p>
<p>slide!</p>
</div>
</fieldset>
<p/>
<fieldset id= "Content" >
<div class= "Slide" >
<a class= "Viewbutton" href= "#" >
Read more
</a>
<p>slide!</p>
<p>slide!</p>
<p>slide!</p>
<p>slide!</p>
<p>slide!</p>
</div>
</fieldset>
<script type= "Text/javascript" >
var max_h=300;
var min_h=100;
var max_w=500;
var min_w=10;
var max_o=1;
var min_o=0.3;
$ (". Slide"). css ({opacity:min_o});//Set Initial transparency
$ (". Slide"). css ({height:min_h});//Set Initial height
$ (". Viewbutton"). Click (function () {//Here just call the portrait expansion, or you can call the horizontal expand
$ (this). HTML (Animate_toggle_height (max_h,min_h,max_o,min_o,$ (this). Parent (), 500))//automatically recognized as Viewbutton on the previous level of animation
});
</script>
</body>
The Viewbutton hierarchy can be modified on its own, but notice what the goal of the animation is. The Viewbutton I wrote would animate the Div at the top of it, so I didn't have to write the selector too complicated.
