jQuery CSS 半開折疊效果原理及程式碼(自寫)_jquery

一個專案想用jQuery做一個可以半折疊的DIV元素，苦於jQueryUI中accordion沒有提供相關的方法，就自己寫了個。以前使用jQueryUI的時候發現能夠用的accordion全部折起來了，沒辦法設定折疊的最小高度。
程式碼品質很低，希望老鳥能指點指點。

下圖是效果展示，能夠藉由jQuery的函數展開收縮
 

複製代碼 程式碼如下:

//author: hlhr
//require: Jquery1.4 and above
function animate_toggle_height(maxh,minh,maxo,minoel. //這是縱向的，參數解釋：最大高度，最小高度，最大透明度，最小透明度，元素，動畫速度
if (element.css("height")==minh.toString().concat(" px")){//如果是最小高度就展開
element.animate({
height:maxh,
opacity:maxo
},{queue: false},speed);
return "Fold"
}
if (element.css("height")==maxh.toString().concat("px")){//如果是最大高度就折疊
$ (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";
}
}

複製程式碼

程式碼如下:

Read more

slide!

slide!

slide!

slide!

slide!

Read more

slide!

slide !

slide!

slide!

slide!

viewbutton的層級可自行修改，但要注意動畫的目標是什麼。我寫的viewbutton會對它上一級的那個div做動畫，所以就不用把選擇器寫得過於複雜了。