jQuery의 애니메이션 효과는 무엇입니까?
- 清浅원래의
- 2018-11-28 14:48:086329검색
jQuery의 애니메이션 효과에는 다음이 포함됩니다: 슬라이딩 효과를 얻기 위한 SlideDown, SlideUp 등; 페이드 인 및 페이드 아웃 효과를 얻기 위한 fadeIn, fadeToggle 등
jQuery에는 많은 흥미로운 효과를 얻는 데 도움이 되는 많은 메서드가 있습니다. 그리고 페이지에 재미있는 애니메이션 효과와 프로그램 코드를 적용하여 효과를 구현하는 것이 원본 JavaScript 코드를 사용하는 것보다 더 편리하고 간결합니다. 오늘은 이 글에서 여러 가지 jQuery 애니메이션 작업 방법을 자세히 소개하겠습니다. 모두의 배움에.
【추천 코스: jQuery animation】
슬라이딩 효과
slideDown()
은 높이 변화에 따라 아래에서 위로 증가하고 슬라이딩 방식으로 표시될 수 있습니다. 숨겨진 content
$(".btn2").click(function(){
$("p").slideDown();
});slideUp()
높이 변경에 따라 위에서 아래로 축소 가능
$("p").slideUp("slow");slideToggle([speed],[easing],[fn])
높이 변경에 따라 일치하는 모든 요소의 표시 여부 전환 Sex
예: 단락을 빠르게 위 또는 아래로 밀면 대화 상자가 나타납니다.
$("p").slideToggle("fast",function(){
alert("hello world!"）페이드 인 및 아웃
fadeIn()
불투명도 변경을 설정하여 일치하는 모든 요소의 페이드 인 효과 달성
예: 200밀리초를 사용하여 단락을 빠르게 페이드 인하면 대화 상자가 나타납니다.
("p").fadeIn("fast",function(){
alert("hello world!");
});fadeOut()
불투명도 변경을 설정하여 일치하는 모든 요소의 페이드 아웃 효과를 실현하세요
예: 사용 200밀리초만 있으면 단락이 빠르게 페이드 아웃된 다음 대화 상자가 나타납니다.
$("p").fadeOut("fast",function(){
alert("hello world!");
});fadeTo()
일치하는 모든 요소의 불투명도를 지정된 불투명도에 맞춰 점진적으로 조정합니다.
단락의 투명도를 0.25로 빠르게 조정합니다. 팝업되기 전 200밀리초 안에 약 1/4 표시 대화 상자
$("p").fadeTo("fast", 0.25, function(){
alert("hello world!");
});fadeToggle()
불투명도 변경을 통해 일치하는 모든 요소의 페이드 인 및 페이드 아웃 효과를 전환합니다
예: 단락을 빠르게 페이드 200ms 후에 대화 상자가 나타납니다
$("p").fadeToggle("fast",function(){
alert("hello world!");
});사례: 마우스로 버튼을 클릭하면 숨겨진 내용이 표시되고 페이드 아웃됩니다
<body>
<div id="box">
<div id="btn">点击这里，显示或隐藏</div>
<div id="content">jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架)</div>
</div>
<script src="jquery/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#content").slideToggle("slow");
$("#content").fadeToggle("slow");
});
});
</script>효과 추가 전
추가 후 the effect
요약: 위 내용이 이 글의 전체 내용입니다. 이 글을 통해 모든 분들이 jQuery의 애니메이션 효과와 우리가 원하는 애니메이션 효과를 만드는 방법에 대해 어느 정도 이해하실 수 있기를 바랍니다.
위 내용은 jQuery의 애니메이션 효과는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!