jQuery CSS 半開き折り効果の原理とコード（自作）_jquery

プロジェクトでは、jQuery を使用して半折り畳み可能な DIV 要素を作成したいと考えていましたが、jQueryUI のアコーディオンには関連するメソッドが提供されていなかったので、自分で作成しました。以前に jQueryUI を使用したとき、利用可能なすべてのアコーディオンが折りたたまれており、折りたたむための最小の高さを設定する方法がないことがわかりました。
コードの品質は非常に低いので、経験のある人にアドバイスをいただければ幸いです。

下の図は、jQuery 関数を使用して拡大および縮小できるエフェクトの表示です

コードをコピー コードは次のとおりです:

//author: hlhr
//require: Jquery1.4 以降
function animate_toggle_height(maxh,minh,maxo) ,mino,element,speed) { //これは垂直方向です、パラメータの説明: 最大高さ、最小高さ、最大透明度、最小透明度、要素、アニメーション速度
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")){//Ifこれは最大の高さです。折りたたんでください
$ (this).html("");
element.animate({
height:minh,
opacity:mino
},{queue : false},speed);
return " 続きを読む";
}
}
function animate_toggle_width(maxw,minw,maxo,mino,element,speed) {
if (要素. 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 "続きを読む"
}
}

コードをコピー コードは次のとおりです。

var max_h= 300;
var min_h=100;
// var max_w=10;
var min_o=0.3; (".slide").css({opacity:min_o}) ;//初期の透明度を設定します
$(".slide").css({height:min_h});//初期の高さを設定します
$(".viewbutton").click(function(){ //ここでは垂直方向の拡張のみを呼び出していますが、水平方向の拡張も呼び出すことができます
$(this).html(animate_toggle_height(max_h,min_h,max_o,min_o, $(this).parent(),500));//アニメーションの上位レベルとして識別されます
});