jQuery로 아코디언 효과를 얻는 방법-JS 튜토리얼-php.cn

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

清浅

풀어 주다： 2018-11-29 09:12:37

원래의

6938명이 탐색했습니다.

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

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

[추천 과정: jQuery Tutorial]

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

지식 포인트 아코디언 효과

(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()을 추가하여 원본 애니메이션을 중지해야 애니메이션이 겹치는 것을 방지하고 효과에 영향을 미칠 수 있습니다.

전체 코드 표시





Document













<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

Image 12.jpg