> 웹 프론트엔드 > JS 튜토리얼 > jQuery CSS 반개방형 접기 효과 원리 및 코드(자체 작성)_jquery

jQuery CSS 반개방형 접기 효과 원리 및 코드(자체 작성)_jquery

WBOY
풀어 주다: 2016-05-16 17:41:14
원래의
866명이 탐색했습니다.

프로젝트의 경우 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 (element. css("width")==minw.toString( ).concat("px")){
element.animate({
width:maxw,
opacity:maxo
},{queue : false},speed);
return " 접기"
}
if (element.css("width")==maxw.toString().concat("px")){
element.animate({
width:minw,
opacity:mino
},{queue: false},speed)
return "자세히 보기"
}
}

코드 복사 코드는 다음과 같습니다.



script src="jqslider.js"> 위의 js 라이브러리에 대한 링크-->