jquery는 슬라이딩 효과를 구현합니다.
- WBOY원래의
- 2016-05-16 15:46:071228검색
프로젝트에서는 슬라이딩 효과를 구현하기 위해 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
콜백(선택 사항)FunctionFunction
jQuery 코드:
$("p").slideDown("slow");
jQuery 코드:
$("p").slideDown("fast",function(){
alert("Animation Done.");
});
slideUp(속도, [콜백])
개요
이 애니메이션 효과는 요소의 높이만 조정하여 일치하는 요소를 "슬라이딩" 방식으로 숨길 수 있습니다. jQuery 1.3에서는 상단 및 하단 패딩과 여백도 애니메이션화되어 효과가 더 매끄러워집니다.
speedString,Number
콜백(선택)함수
jQuery 코드:
$("p").slideUp("slow");
jQuery 코드:
$("p").slideUp("fast",function(){
alert("Animation Done.");
});
slideToggle(속도, [콜백])
이 애니메이션 효과는 요소의 높이만 조정하여 일치하는 요소를 "슬라이딩" 방식으로 숨기거나 표시할 수 있습니다. jQuery 1.3에서는 상단 및 하단 패딩과 여백도 애니메이션화되어 효과가 더 매끄러워집니다.
speedString,Number
콜백(선택)함수
애니메이션이 완료되면 실행되는 함수
jQuery 코드:
$("p").slideToggle("slow");
jQuery 코드:
$("p").slideToggle("fast",function(){
alert("Animation Done.");
});