jQuery로 아코디언 효과를 얻는 방법

jQuery에서는 주로 마우스가 슬라이드 인/아웃될 때 애니메이트의 너비를 설정하여 아코디언 효과를 얻습니다.

오늘은 jQuery를 사용하여 아코디언 효과를 얻는 방법, 즉 마우스가 들어가거나 미끄러지면 확장되고, 슬라이드하면 확장됩니다. 작은 효과

[추천 과정: jQuery Tutorial]

지식 포인트 아코디언 효과

(1) for 루프를 통해 모든 이미지를 탐색하고 jQuery의 eq() 메서드를 사용하여 li 태그를 선택한 다음 배경 이미지를 추가합니다.

eq(index) 메서드: 이미지의 위치를 ​​나타냅니다. 요소(최소값은 0), 음수인 경우 컬렉션의 마지막 요소부터 다시 계산됩니다.

$(".box>ul>li").eq(i).css("backgroundImage","url(image/"+(i+1)+".jpg)");

(2) mouseenter(): 마우스 포인터가 요소 안으로 미끄러지면 이벤트가 트리거되고, 이는 mouseenter 이벤트가 발생할 때 실행되는 함수를 실행합니다.

(3) mouseleave(): 마우스가 있을 때. 포인터가 요소를 떠나면 이벤트가 트리거됩니다. , mouseleave 이벤트가 발생할 때 실행될 함수를 지정합니다. 이 이벤트는 mouseenter 이벤트와 함께 가장 자주 사용됩니다.

(4) stop(stopAll,goToEnd): 현재 실행 중인 애니메이션을 중지합니다.

stopAll: 선택한 요소의 대기 중인 모든 애니메이션을 중지할지 여부,

goToEnd: 현재 애니메이션이 완료되도록 허용할지 여부.

두 매개변수는 모두 선택사항이지만 goToEnd 매개변수는 stopAll 매개변수가 설정된 경우에만 사용할 수 있으며 단독으로 사용할 수 없습니다.

(5) 형제(선택자): 각 요소의 일치하는 세트를 가져오고 필터링을 통해 선택합니다. 선택 과목.

selector는 요소를 일치시키는 데 사용되는 선택기 표현식을 나타내는 문자열 값을 나타냅니다.

(6) animate() 메서드: CSS 속성 집합의 사용자 정의 애니메이션을 수행합니다. 이 방법은 CSS 스타일을 통해 요소를 한 상태에서 다른 상태로 변경합니다. 숫자 값만 애니메이션을 만들 수 있고 문자열 값은 애니메이션을 만들 수 없습니다.

Note: 애니메이션 작성 시 반드시 stop()을 추가하여 원본 애니메이션을 중지해야 애니메이션이 겹치는 것을 방지하고 효과에 영향을 미칠 수 있습니다.

전체 코드 표시

<script>
$(function(){
for(var i=0;i<$(".box>ul>li").length;i++){
$(&quot;.box&gt;ul&gt;li&quot;).eq(i).css(&quot;backgroundImage&quot;,&quot;url(image/&quot;+(i+1)+&quot;.jpg)&quot;);
  }
 $(".box>ul>li").mouseenter(function(){
//  鼠标滑过时li的宽度为800，离开时为240
$(this).stop().animate({width:800}).siblings().stop().animate({width:100}).mouseleave
(function(){
   $(".box>ul>li").stop().animate({width:240})
 })
 })
 })
</script>

Rendering

애니메이션 데모

요약: 위 내용은 이 기사의 전체 내용입니다. , 이 기사를 통해 jQuery를 통해 아코디언 효과를 얻는 방법을 모두에게 알려주세요.

위 내용은 jQuery로 아코디언 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!