ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery CSS 半開き折り効果の原理とコード(自作)_jquery

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

WBOY
リリース: 2016-05-16 17:41:14
オリジナル
891 人が閲覧しました

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

下の図は、jQuery 関数を使用して拡大および縮小できるエフェクトの表示です
jQuery CSS 半開き折り効果の原理とコード(自作)_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 "続きを読む"
}
}

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