오늘은 슬라이딩 스위칭 효과를 달성하기 위해 애니메이션을 사용하는 작은 예를 여러분과 공유하겠습니다.
jQuery는 슬라이딩 효과를 달성하는 몇 가지 방법을 제공한다는 것을 모두 알고 있습니다.
1. Slidedown ()
2.slideup ()
3.slidetoggle ()
그러나 위의 슬라이딩은 슬라이딩의 방향을 제어하는 데 편리하지 않으므로 스스로 작성해 봅시다. . .
코드는 다음과 같습니다.
<! docType html> <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-catsible"content = "ie get, chrome = 1"> <title> 예제 </title> <meta name = "description" "> <meta name ="keords "" "" "" "" "" "" "" "" "" "" "" "" ""컨텐츠 "" " 신체 {너비 : 100%; 높이 : 자동; } .Content {너비 : 150px; 높이 : 50px; 위치 : 절대; 상단 : 20px; 왼쪽 : 20px; 오버플로 : 숨겨진; 배경색 : 빨간색; } .slide-box {너비 : 300px; 위치 : 상대; } .slide1 {너비 : 150px; 높이 : 50px; 플로트 : 왼쪽; 디스플레이 : 인라인 블록; 라인 높이 : 50px; 텍스트 정렬 : 센터; 배경색 : #bdd8cf; } .slide2 {너비 : 150px; 높이 : 50px; 플로트 : 오른쪽; 디스플레이 : 인라인 블록; 라인 높이 : 50px; 텍스트 정렬 : 센터; 배경색 : #C1C4C4; . $ (function () {$ ( ". content"). hover (function () {$ ( ". slide-box"). stop (true) .animate ({right : "150px"}, 'slow');}, function () {$ ( ". slide-box"). 정지 (true). Ananimate ({right : "0"}, 'slow');});}); </body> </html>위의 코드는 완전한 슬라이딩 효과를 달성 할 수 있습니다. 그러나 한 가지 주목할 사항,
위의 그림과 같이, 마우스가 빠르게 움직일 때 여러 이벤트가 생성되어 스택 팀을 형성하여 마우스가 제거 된 후 슬라이딩 또는 깜박임의 영향을 초래하기 위해 STOP () 이벤트를 추가해야합니다.
위의 기사 애니메이션은 슬라이딩 스위칭 효과 [예제 코드]가 내가 공유하는 모든 내용을 알고 있습니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.