jquery는 슬라이딩 효과를 구현합니다.-JS 튜토리얼-php.cn

jquery는 슬라이딩 효과를 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:46:07

원래의

1240명이 탐색했습니다.

프로젝트에서는 슬라이딩 효과를 구현하기 위해 jquery를 사용해야 하므로 관련 내용은 다음과 같이 구성됩니다. 텍스트 설명과 코드 분석이 포함되어 있어 매우 자세하게 설명되어 있습니다. 배우다.

구현 방법 1:

.slideUp([duration][,complete])——대상 요소가 위로 올라가고 숨겨집니다.
.slideDown([duration][,complete])——대상 요소가 아래로 슬라이드되어 표시됩니다. .slideToggle([duration][,complete])——대상 요소가 숨겨져 있으면 아래로 밀어 표시하고, 그렇지 않으면 위로 밀어 숨깁니다.

참고: 기간은 메서드 실행 시간 간격이고 완료는 콜백 함수입니다.

<!DOCTYPE html> 
<html lang="zh_CN"> 
<head> 
 <meta charset="UTF-8"> 
 <title>滑动效果</title> 
 <script src="js/jquery-2.1.3.min.js"></script> 
 <script src="js/slide.js"></script> 
 <style> 
  img{ 
   width:500px; 
  } 
 </style> 
</head> 
<body> 
<div> 
 <div> 
  <button id="btn1">向上划入隐藏</button> 
  <button id="btn2">向下滑出显示</button> 
  <button id="btn3">向上划入隐藏/向下滑出显示</button> 
 </div> 
 <img src="images/2.jpg"/> 
</div> 
</body> 
</html>

로그인 후 복사

slide.js 코드:

/*滑动效果*/ 
$(document).ready(function(){ 
 //向上滑入 
 $('#btn1').click(function(){ 
  $('img').slideUp(2000); 
 }); 
 //向下滑出 
 $('#btn2').click(function(){ 
  $('img').slideDown(2000); 
 }); 
 //切换滑动 
 $('#btn3').click(function(){ 
  $('img').slideToggle(2000); 
 }); 
})

로그인 후 복사

구현 방법 2:

1. jQuery___ 효과(슬라이딩 효과)

slideDown(속도, [콜백])

개요

높이를 변경(아래로 증가)하여 일치하는 모든 요소를 동적으로 표시하고 선택적으로 표시가 완료된 후 콜백 함수를 트리거합니다.
이 애니메이션 효과는 요소의 높이만 조정하여 일치하는 요소가 "슬라이딩" 방식으로 표시되도록 합니다. jQuery 1.3에서는 상단 및 하단 패딩과 여백도 애니메이션화되어 효과가 더 매끄러워집니다.

매개변수

speedString,Number

세 가지 미리 결정된 속도("느림", "보통" 또는 "빠름") 중 하나의 문자열 또는 애니메이션 지속 시간을 나타내는 밀리초 값(예: 1000)

콜백(선택 사항)FunctionFunction

애니메이션 완료 시 실행되는 함수

예

설명:

600밀리초 안에 문단을 천천히 아래로 슬라이드하세요

jQuery 코드:

$("p").slideDown("slow");

로그인 후 복사

설명:

200밀리초를 사용하여 단락을 빠르게 아래로 내리면 대화 상자가 나타납니다.

jQuery 코드:

$("p").slideDown("fast",function(){ 
 alert("Animation Done."); 
});

로그인 후 복사

slideUp(속도, [콜백])

개요

높이를 변경(위로 감소)하여 일치하는 모든 요소를 동적으로 숨기고 선택적으로 숨기기가 완료된 후 콜백 함수를 트리거합니다.

이 애니메이션 효과는 요소의 높이만 조정하여 일치하는 요소를 "슬라이딩" 방식으로 숨길 수 있습니다. jQuery 1.3에서는 상단 및 하단 패딩과 여백도 애니메이션화되어 효과가 더 매끄러워집니다.

매개변수

speedString,Number

세 가지 미리 결정된 속도("느림", "보통" 또는 "빠름") 중 하나의 문자열 또는 애니메이션 지속 시간을 나타내는 밀리초 값(예: 1000)

콜백(선택)함수

애니메이션 완료 시 실행되는 함수

예

설명:

600밀리초 안에 문단을 천천히 위로 슬라이드하세요.

jQuery 코드:

$("p").slideUp("slow");

로그인 후 복사

설명:

200밀리초를 사용하여 단락을 빠르게 위로 올리면 대화 상자가 나타납니다.

jQuery 코드:

$("p").slideUp("fast",function(){ 
 alert("Animation Done."); 
});

로그인 후 복사

slideToggle(속도, [콜백])

개요

높이 변경을 통해 일치하는 모든 요소의 표시 여부를 전환하고 선택적으로 전환이 완료되면 콜백 함수를 트리거합니다.

이 애니메이션 효과는 요소의 높이만 조정하여 일치하는 요소를 "슬라이딩" 방식으로 숨기거나 표시할 수 있습니다. jQuery 1.3에서는 상단 및 하단 패딩과 여백도 애니메이션화되어 효과가 더 매끄러워집니다.

매개변수

speedString,Number

세 가지 미리 결정된 속도("느림", "보통" 또는 "빠름") 중 하나의 문자열 또는 애니메이션 지속 시간을 나타내는 밀리초 값(예: 1000)

콜백(선택)함수 애니메이션이 완료되면 실행되는 함수

예

설명:

600밀리초 동안 단락을 천천히 위 또는 아래로 슬라이드합니다.

jQuery 코드:

$("p").slideToggle("slow");

로그인 후 복사

설명:

200밀리초를 사용하여 단락을 빠르게 위 또는 아래로 슬라이드하면 대화 상자가 나타납니다.

jQuery 코드:

$("p").slideToggle("fast",function(){ 
 alert("Animation Done."); 
});

로그인 후 복사

위 내용은 슬라이딩 효과를 구현하는 jquery 코드입니다. 마음에 드셨으면 좋겠습니다.