날카로운 jQuery 독서 노트---jQuery 애니메이션
41873 단어 jquery
1.show 및 hide
2. fadeIn 및 fadeOut
3.slideUp 및 slideDown
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<title>jQuery </title>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }
.content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }
</style>
</head>
<body>
<div id="panel">
<h5 class="head"> jQuery?</h5>
<div class="content">
jQuery Prototype JavaScript ， John Resig 2006 1 。jQuery ， JavaScript HTML 、 DOM、 、 Ajax。 JavaScript 。
</div>
</div>
</body>
<script type="text/javascript">
/**
* 1. show() hide()
* show() hide() jQuery 。 HTML ， hide() ， display "none"
* */
// $(function () {
// $("#panel h5.head").toggle(function () {
// $(this).next().hide("slow");
// }, function () {
// $(this).next().show("slow");
// })
// })
/**
* 2. fadeIn() fadeOut()
* fadeIn() fadeOut() 。
* fadeOut() ， ("display:none")。
* fadeIn()
* */
// $(function () {
// $("#panel h5.head").toggle(function () {
// $(this).next().fadeOut("slow");
// }, function () {
// $(this).next().fadeIn("slow");
// })
// })
/**
* 3. slideUp() slideDown()
* slideUp() slideDown() 。
* display "none", slideDown() ， 。
* slideUp() ， 。
* */
$(function () {
$("#panel h5.head").toggle(function () {
$(this).next().slideUp("slow");
}, function () {
$(this).next().slideDown("slow");
})
})
</script>
</html>4. 애니메이션 사용자 정의
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
</head>
<body>
<div id="panel"></div>
</body>
<script type="text/javascript">
/**
* 4. --animate()
* : animate(param, speed, callback)
* param: ， {property1:"value1", property2:"value2"...}
* speed: ，
* callback: ，
* */
/**
* 4.1
* */
// $(function () {
// $("#panel").click(function () {
// $(this).animate({left: "500px", top: "500px"}, 3000);// 500px
// });
// })
/**
* 4.2 、
* */
// $(function () {
// $("#panel").click(function () {
// $(this).animate({left: "+=500px"}, 3000);// 500px
// })
// })
/**
* 4.3
*
* 4.3.1
* */
// $(function () {
// $("#panel").click(function () {
// $(this).animate({left: "500px", height: "200px"}, 3000);
// });
// })
/**
* 4.3.2
* */
// $(function () {
// $("#panel").click(function () {
// $(this).animate({left: "500px"}, 3000);
// $(this).animate({height: "200px"}, 3000);
// });
// })
/**
* 4.4
* */
// $(function () {
// $("#panel").css("opacity", "0.5");
// $("#panel").click(function () {
// $(this).animate({left:"400px", height:"200px", opacity:"1"}, 3000)
// .animate({top:"200px", width:"200px"}, 3000)
// .fadeOut("slow");
// });
// })
/**
* 4.5
*
* ，css ， css() ，
* */
// $(function () {
// $("#panel").css("opacity", "0.5");
// $("#panel").click(function () {
// $(this).animate({left:"400px", height:"200px", opacity:"1"}, 3000)
// .animate({top:"200px", width:"200px"}, 3000, function () {
// $(this).css("border", "5px solid blue");
// })
// });
// })
/**
* 4.6
* */
/**
* 4.6.1 ---stop()
* ：stop([clearQueue], [gotoEnd]);
* clearQueue gotoEnd ， Boolean (true false)
* clearQueue
* gotoEnd
*
*
* stop() ， ， ，
*
* ， stop ， ，
* */
// $(function () {
// $("#panel").hover(function () {
// $(this).stop()
// .animate({height: "150", width: "300"}, 200);
// }, function () {
// $(this).stop()
// .animate({height: "22", width: "60"}, 300);
// })
// })
//
// $(function () {
// $("#panel").hover(function () {
// $(this).stop(true)
// .animate({height: "150"}, 200) //
// //
// .animate({width: "300"});
// }, function () {
// $(this).stop(true)
// .animate({height: "22"}, 300)
// .animate({width: "60"}, 300);
// })
// })
/**
* (gotoEnd) ， 。
*
* ：jQuery ， 。
* */
/**
* 4.6.2
* animate() ，
* */
// if(!$(element).is(":animate")){
// // ，
// }
/**
* 4.6.3
* ， ， delay() 。
* */
// $(function () {
// $("#panel").click(function () {
// $(this).animate({left: "400px", height: "200px", opacity: "1"}, 3000)
// .delay(1000)
// .animate({top: "200px", width: "200px"}, 3000)
// .delay(2000)
// .fadeOut("slow");
// })
// })
/**
* 4.7
* ，jQuery 4
* toggle(speed, [callback])------- 1.9
* slideToggle(speed, [easing], [callback])
* fadeTo(speed, opacity, [callback])
* fadeToggle(speed, [easing], [callback])
* */
/**
* 4.7.1 toggle()--
* */
/**
* 4.7.2 slideToggle()-- ，
* */
// $(function () {
// $("#panel").click(function () {
// $(this).slideToggle();
// });
// })
/**
* 4.7.3 fadeTo()-- 。
* */
// $(function () {
// $("#panel").click(function () {
// $(this).fadeTo(600, 0.2);
// });
// })
/**
* 4.7.4 fadeToggle()-- 。
* */
// $(function () {
// $("#panel").click(function () {
// $(this).fadeToggle();
// });
// })
</script>
</html>마지막으로 애니메이션 방법의 총결
방법
설명
hide() 및 show()
높이, 너비, 불투명도 등 여러 스타일 속성을 동시에 수정합니다.
fadeIn() 및 fadeOut()
불투명도만 변경
slideUp 및 slideDown()
높이만 변경
fadeTo()
불투명도만 변경
toggle()
hide () 와 show () 방법을 대체하기 위해, 높이, 너비, 불투명도 등 여러 스타일을 동시에 수정합니다.
slideToggle()
슬라이드 업과 슬라이드 다운() 방법 대신 사용하기 때문에 높이만 변경할 수 있습니다
fadeToggle()
fadeIn () 과fadeOut () 방법을 대체하는 데 사용되기 때문에 불투명도만 바꿀 수 있습니다
animate()
사용자 정의 방법에 속하며 상기 각종 애니메이션 방법의 실질적인 내부에서 애니메이션 () 방법을 사용했다.이 밖에 애니메이션 () 방법을 직접 사용하면'left','marginLeft','scrollTop'등 다른 스타일 속성을 사용자 정의할 수 있다.
애니메이션 큐
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
