JQuery(둘) - 단순 애니메이션 효과
1. JQuery는 디스플레이를 숨기는 기능을 수행합니다.
1, jQuery hide() 및 show()
jQuery에서는 HTML 요소를 숨기고 표시하는 데 hide() 및 show() 방법을 사용할 수 있습니다.
2,jQuery toggle()
jQuery를 통해hide()와 show() 방법을 전환하는 toggle () 방법을 사용할 수 있습니다.
3. 문법:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
선택할 수 있는speed 매개 변수는 숨기기/표시 속도를 규정하고'slow','fast'또는 밀리초 값을 얻을 수 있습니다.
선택할 수 있는 콜백 매개 변수는 완성된 후에 실행되는 함수 이름을 숨기거나 표시합니다.
나는 Toggle로 예를 들었다.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(1000);
});
});
</script>
</head>
<body>
<button type="button"> </button>
<p> 。</p>
<p> 。</p>
</body>
</html>
둘째, 애니메이션 효과를 페이드아웃하는 기능:
방법
속뜻
구문
fadeIn()
숨겨진 요소 페이드 인
$(selector).fadeIn(speed,callback);
fadeout()
가시 요소 페이드아웃에 사용
$(selector).fadeOut(speed,callback);
fadeToggle()
fadeIn () 과fadeOut () 방법 사이를 전환할 수 있습니다. 위의 toggle 기능과 같습니다.
$(selector).fadeToggle(speed,callback);
fadeTo()
지정된 불투명도로 그래디언트를 허용합니다(값은 0과 1 사이).
$(selector).fadeTo(speed,opacity,callback); 여기서: opacity는 불투명도 매개 변수입니다. (0 - 1 사이)
fadeTo를 몇 가지 예로 들자.
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
</script>
</head>
<body>
<p> fadeTo() 。</p>
<button> ， </button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
효과도, 여러분 스스로 코드 한 부를 실행해 보세요!
셋째, 슬라이딩 효과의 기능, 이것은 여러분께서 이 몇 가지 방법을 보시면 됩니다. 예는 예를 들지 않고 위의 것과 대동소이합니다.
방법
속뜻
구문
slideDown
원소를 아래로 미끄러뜨리는 데 사용
$(selector).slideDown(speed,callback);
slideUp
원소를 위로 미끄러뜨리는 데 사용
동상
slideToggle
원소가 아래로 미끄러지면 슬라이드Toggle()은 위로 미끄러질 수 있습니다.원소가 위로 미끄러지면 슬라이드Toggle()은 아래로 미끄러질 수 있습니다.
동상
넷째, 애니메이션 효과, 이것은 상대적으로 보기 좋고 복잡하지만 단지 하나의 방법을 사용했다.
jQuery 애니메이션 - animate () 방법
jQuery animate () 방법은 사용자 정의 애니메이션을 만드는 데 사용됩니다.
구문:
$(selector).animate({params},speed,callback);
필수 params 매개변수는 애니메이션을 형성하는 CSS 속성을 정의합니다.
선택할 수 있는 speed 매개 변수는 효과의 시간을 정합니다.그것은 "slow", "fast"또는 밀리초 값을 얻을 수 있습니다.
선택할 수 있는 콜백 매개 변수는 애니메이션이 끝난 후에 실행되는 함수 이름입니다.
우리는 하나의 예를 보았다. 이 예는 여러 차례의amimate 방법을 사용하여 애니메이션을 연결시켰다.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>
</head>
<body>
<button> </button>
<p> ， HTML ， 。 ， CSS position relative、fixed absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
다섯째, 몇 가지 효과에 대한 보충:
위에서 흔히 볼 수 있는 몇 가지 JQuery가 편리하고 신속하게 실현하는 효과에 대해 그들과 관련된 몇 가지 방법을 배울 수 있습니다.
1, jQuery stop() 방법:
jQuerystop () 방법은 애니메이션이나 효과를 완성하기 전에 멈추는 데 사용됩니다.
stop () 방법은 슬라이딩, 페이드 아웃, 사용자 정의 애니메이션을 포함한 모든 jQuery 효과 함수에 적용됩니다.
구문:
$(selector).stop(stopAll,goToEnd);
설명:
선택적 stopAll 매개 변수는 애니메이션 큐를 지워야 하는지 여부를 결정합니다.기본값은false입니다. 즉, 활성화된 애니메이션만 정지하고, 대기열에 배열된 애니메이션은 뒤로 실행할 수 있습니다.
선택할 수 있는 goToEnd 매개 변수는 현재 애니메이션을 즉시 완성할지 여부를 규정합니다.기본값은 false입니다.
따라서 기본적으로 stop () 은 선택한 요소에 지정된 현재 애니메이션을 지웁니다.
2. 위의 몇 가지 애니메이션 방법 문법에서 언급한 콜백 함수, 즉 현재 애니메이션을 실행한 후에 실행할 함수이다.반드시 지금 콜백에 있어야 합니다. 그렇지 않으면 순서가 정확하지 않은 결과가 나올 수 있습니다.여기서는 더 이상 시범을 보이지 않는다.
3, Chaining, 즉 체인은 우리가 위에 있는 몇 가지 애니메이션을 연결해서 쓸 수 있다는 뜻이다. 그러면 같은 요소를 여러 번 찾을 필요가 없다.다음 예를 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function(){
// ，
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">jQuery </p>
<button> </button>
</body>
</html>
JQuery를 위해 이루어진 몇 가지 흔한 애니메이션 효과를 종합해 보면 간단하지만 매우 실용적이다. 우리는 일거수일투족을 통해 더욱 좋은 효과를 얻을 수 있다.물론 더 많은 효과 방법은 JQuery의 API를 통해 조회할 수 있고 더 많은 만족을 얻을 수 있습니다!!!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
