jQuery 애니메이션과 특수효과에 대한 자세한 설명
- 韦小宝원래의
- 2017-11-28 09:46:381573검색
비동기식 외에
jquery에서 가장 많이 사용해야 하는 것은 애니메이션과 특수 효과입니다. 사용자에게 더 나은 경험을 제공하려면 jquery가 최선의 선택입니다. jquery의 애니메이션을 살펴보겠습니다. 특수효과 설명!
1. 표시 및 숨기기 hide() 및 show()
애니메이션에서 표시 및 숨기기는 jQuery의 표시 및 숨기기에 대해 간략하게 소개합니다.
<script type="text/javascript">
$(function() {
$("input:first").click(function() {
$("p").hide(); //隐藏
});
$("input:last").click(function() {
$("p").show(); //显示
});
});
</script>
<input type="button" value="Hide">
<input type="button" value="Show">
<p>点击按钮，看看效果</p>
<div><em>本节主要降级和学习jQuery的自动显隐，渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对于动画来说，显示和隐藏是最基本的效果之一，本节简单介绍jQuery的显示和隐藏。</em>
</div>위는 hide(), show() 함수에 대한 테스트입니다.
2. show(), hide() 및 전환() 메소드를 사용하세요
이전 예제에서는 show() 및 hide() 메소드를 간략하게 소개했습니다. 실제로 이 두 메소드는 매개변수 제어를 허용합니다. 표시 및 숨기기 프로세스.
구문은 다음과 같습니다
show(duration,[callback]); hide(duration,[callback]);
그 중 지속 시간은 애니메이션 실행 시간을 나타내며, 느림, 보통, 빠름 등 속도를 나타내는 문자열일 수도 있고 시간(밀리초)을 나타내는 정수일 수도 있습니다. 콜백은 선택적인 콜백 함수입니다. 애니메이션이 완료된 후 실행됩니다.
<script type="text/javascript">
$(function() {
$("input:first").click(function() {
$("p").hide(300); //隐藏
});
$("input:last").click(function() {
$("p").show(500); //显示
});
});
</script>hide() 및 show()에 시간 매개변수가 추가된 점만 제외하면 예제는 첫 번째 예제와 동일합니다. 실제로 toogle()은 이벤트 매개변수를 추가할 수도 있습니다.
3. fadeIn() 및 fadeOut() 메서드 사용
jQuery는 또한 fadeIn() 및 fadeOut이라는 두 가지 실용적인 메서드를 제공합니다. 느림()과 숨김().
fadeIn(duration, [callback]); fadeOut(duration, [callback]);
예
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("img").fadeOut(3000); //逐渐fadeOut
});
$("input:eq(1)").click(function() {
$("img").fadeIn(1000); //逐渐fadeIn
});
});
</script>
<img src="/uploads/allimg/150204/225Q14038-0.jpg">
<input type="button" value="Hide">
<input type="button" value="Show">fadeTo() 메소드 사용법.
fadeTo() 메서드는 선택한 요소의 불투명도를 지정된 값으로 점진적으로 변경합니다.
예:
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("img").fadeOut(1000);
});
$("input:eq(1)").click(function() {
$("img").fadeIn(1000);
});
$("input:eq(2)").click(function() {
$("img").fadeTo(1000, 0.5);
});
$("input:eq(3)").click(function() {
$("img").fadeTo(1000, 0);
});
});
</script>
<p><img src="03.jpg"></p>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="FadeTo 0.5">
<input type="button" value="FadeTo 0">fadeOut 관련 매개변수
속도
선택 사항. 요소가 현재 투명도에서 지정된 투명도로 변경되는 속도를 지정합니다.
가능한 값:
밀리초(예: 1500)
"slow"
"normal"
"fast"
opacity 필수입니다. 페이드 인 또는 페이드 아웃할 투명도를 지정합니다. 0.00에서 1.00 사이의 숫자여야 합니다.
콜백
선택사항. fadeTo 함수가 실행된 후 실행될 함수입니다.
콜백에 대해 자세히 알아보려면 jQuery 콜백 장을 방문하세요.
이 매개변수는 속도 매개변수를 설정하지 않으면 설정할 수 없습니다.
4. 슬라이드 SlideUp 및 SlideDown 효과
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("div").add("img").slideUp(1000);
});
$("input:eq(1)").click(function() {
$("div").add("img").slideDown(1000);
});
$("input:eq(2)").click(function() {
$("div").add("img").hide(1000);
});
$("input:eq(3)").click(function() {
$("div").add("img").show(1000);
});
});
</script>
<input type="button" value="SlideUp">
<input type="button" value="SlideDown">
<input type="button" value="Hide">
<input type="button" value="Show"><br>
<div></div><img src="04.jpg">
여러 애니메이션 효과가 앞서 언급되었으며, jQuery는 PPT에서 유사한 슬라이드 커튼을 시뮬레이션하기 위해 SlideUp() 및 SlideDown()도 제공합니다. 효과는 완전히 동일합니다. 느린() 및 숨기기()와 같습니다.
위 코드는 add 메소드를 사용하여 결합된 div와 img를 정의합니다.
5. 사용자 정의 애니메이션
프레임워크의 다양성과 코드 파일의 크기를 고려할 때 jQuery는 모든 애니메이션 효과를 다룰 수는 없지만 개발자가 애니메이션을 사용자 정의할 수 있는 animate() 메서드를 제공합니다. 이 섹션에서는 주로 animate() 메서드의 두 가지 형식과 응용 프로그램을 소개합니다.
animate() 메서드는 개발자에게 많은 공간을 제공합니다. 그것은 두 가지 형태로 제공됩니다. 첫 번째 형식이 더 일반적으로 사용됩니다. 사용법은 다음과 같습니다
animate(params,[duration],[easing],[callback])
여기서 params는 변경하려는 CSS 속성 목록이고 변경하려는 최종 값인 Duration은 선택 사항 및 show()/ hide()의 매개 변수는 정확히 동일한 의미를 갖습니다. 완화는 일반적으로 애니메이션 플러그인에서 사용되는 선택적 매개변수입니다. 리듬 변경 과정을 제어하는 데 사용됩니다. jQuery는 선형과 스윙이라는 두 가지 값만 제공합니다. 콜백은 선택적 콜백 함수입니다. 애니메이션이 완료된 후 실행됩니다.
주의가 필요합니다. params의 변수는 낙타 명명 방법을 따릅니다. 예를 들어 paddingLeft는 padding-left로 작성할 수 없습니다. 또한 params는 CSS에서 숫자 값으로 표현되는 속성만 될 수 있습니다. 예를 들어 width.top.opacity 등입니다.
BackgroundColor와 같은 속성은 animate에서 지원되지 않습니다.
<style>
div {
background-color: #FFFF00;
height: 40px;
width: 80px;
border: 1px solid #000000;
margin-top: 5px;
padding: 5px;
text-align: center;
}
</style>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("#block").animate({
opacity: "0.5",
width: "80%",
height: "100px",
borderWidth: "5px",
fontSize: "30px",
marginTop: "40px",
marginLeft: "20px"
}, 2000);
});
});
</script>
<button id="go">Go>></button>
<div id="block">动画！</div>params에서 jQuery는 "+=" 또는 "-="를 사용하여 상대적인 변경 사항을 나타낼 수도 있습니다. 예를 들어,
<style>
div {
background-color: #FFFF00;
height: 40px;
width: 80px;
border: 1px solid #000000;
margin-top: 5px;
padding: 5px;
text-align: center;
position: absolute;
}
</style>
<script type="text/javascript">
$(function() {
$("button:first").click(function() {
$("#block").animate({
left: "-=80px" //相对左移
}, 300);
});
$("button:last").click(function() {
$("#block").animate({
left: "+=80px" //相对右移
}, 300);
});
});
</script>
<button >Go>></button>
<button >Go>></button>
<div id="block">动画！</div>는 먼저 div를 절대적으로 배치한 다음 animate()에서 -= 및 +=를 사용하여 각각 상대적인 왼쪽 및 오른쪽 이동을 달성합니다.
animate() 메소드는 아래와 같이 또 다른 형태를 가지고 있습니다:
animate(params, options)
그 중 params는 첫 번째 형태와 완전히 동일하며 options는 주로 기간을 포함하는 애니메이션 선택적 매개변수 목록입니다. , esaing , 콜백, 대기열 등, 여기서 Duration.easing.callback은 첫 번째 형식과 완전히 동일하고 queue는 부울 값으로, jQuery를 형성하는 여러 animate()가 있는 경우 현재 animate()가 다음 animate()를 따라가며, 순차적으로 실행할지(true) 아니면 동시에 false를 실행할지
다음 예는 animate()의 두 번째 사용법을 보여줍니다.
<style>
div {
background-color: #FFFF22;
width: 100px;
text-align: center;
border: 2px solid #000000;
margin: 3px;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}
input {
border: 1px solid #000033;
}
</style>
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
//第一个animate与第二个animate同时执行，然后再执行第三个
$("#block1").animate({
width: "90%"
}, {
queue: false,
duration: 1500
})
.animate({
fontSize: "24px"
}, 1000)
.animate({
borderRightWidth: "20px"
}, 1000);
});
$("input:eq(1)").click(function() {
//依次执行三个animate
$("#block2").animate({
width: "90%"
}, 1500)
.animate({
fontSize: "24px"
}, 1000)
.animate({
borderRightWidth: "20px"
}, 1000);
});
$("input:eq(2)").click(function() {
$("input:eq(0)").click();
$("input:eq(1)").click();
});
$("input:eq(3)").click(function() {
//恢复默认设置
$("div").css({
width: "",
fontSize: "",
borderWidth: ""
});
});
});
</script>
<input type="button" id="go1" value="Block1动画">
<input type="button" id="go2" value="Block2动画">
<input type="button" id="go3" value="同时动画">
<input type="button" id="go4" value="重置">
<div id="block1">Block1</div>
<div id="block2">Block2</div>以上两个div块同时运用了三个动画效果，其中第一个div快的第一个动画添加了queue:false参数，使得前两项两个动画同时执行。可以通过重置反复测试，熟悉animate()第二种形式。
以上就是本文的全部内容了，希望大家能够喜欢。
相关推荐：
위 내용은 jQuery 애니메이션과 특수효과에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!