jQuery provides a trivially simple interface for doing various kind of amazing effects. jQuery methods allow us to quickly apply commonly used effects with a minimum configuration.
This tutorial covers all the important jQuery methods to create visual effects.
요소 숨기기와 보이기
The commands for showing and hiding elements are pretty much what we would expect: show() to show the elements in a wrapped set and hide() to hide them.
문법:
Here is the simple syntax for show() method:
[selector].show( speed, [callback] ); |
Here is the description of all the parameters:
speed: A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback: This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.
Following is the simple syntax for hide() method:
[selector].hide( speed, [callback] ); |
Here is the description of all the parameters:
speed: A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback: This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.
예제:
Consider the following HTML file with a small JQuery coding:
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#show").click(function () {
$(".mydiv").show( 1000 );
});
$("#hide").click(function () {
$(".mydiv").hide( 1000 );
});
});
</script>
<style>
.mydiv{ margin:10px;padding:12px;
border:2px solid #666;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="mydiv">
This is SQUAR
</div>
<input id="hide" type="button" value="Hide" />
<input id="show" type="button" value="Show" />
</body>
</html>
|
요소 토글링
jQuery provides methods to toggle the display state of elements between revealed or hidden. If the element is initially displayed, it will be hidden; if hidden, it will be shown.
문법:
Here is the simple syntax for one of the toggle() methods:
[selector]..toggle([speed][, callback]); |
Here is the description of all the parameters:
speed: A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback: This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.
예제:
We can animate any element, such as a simple <div> containing an image:
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".clickme").click(function(event){
$(".target").toggle('slow', function(){
$(".log").text('Transition Complete');
});
});
});
</script>
<style>
.clickme{ margin:10px;padding:12px;
border:2px solid #666;
width:100px;
height:50px;
}
</style>
</head>
<body>
<div class="content">
<div class="clickme">Click Me</div>
<div class="target">
<img src="/images/jquery.jpg" alt="jQuery" />
</div>
<div class="log"></div>
</body>
</html>
|
JQuery 효과 관련 메소드 목록
| Methods and Description |
|---|
| animate( params, [duration, easing, callback] ) A function for making custom animations. |
| fadeIn( speed, [callback] ) Fade in all matched elements by adjusting their opacity and firing an optional callback after completion. |
| fadeOut( speed, [callback] ) Fade out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion. |
| fadeTo( speed, opacity, callback ) Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion. |
| hide( ) Hides each of the set of matched elements if they are shown. |
| hide( speed, [callback] ) Hide all matched elements using a graceful animation and firing an optional callback after completion. |
| show( ) Displays each of the set of matched elements if they are hidden. |
| show( speed, [callback] ) Show all matched elements using a graceful animation and firing an optional callback after completion. |
| slideDown( speed, [callback] ) Reveal all matched elements by adjusting their height and firing an optional callback after completion. |
| slideToggle( speed, [callback] ) Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion. |
| slideUp( speed, [callback] ) Hide all matched elements by adjusting their height and firing an optional callback after completion. |
| stop( [clearQueue, gotoEnd ]) Stops all the currently running animations on all the specified elements. |
| toggle( ) Toggle displaying each of the set of matched elements. |
| toggle( speed, [callback] ) Toggle displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion. |
| toggle( switch ) Toggle displaying each of the set of matched elements based upon the switch (true shows all elements, false hides all elements). |
| jQuery.fx.off Globally disable all animations. |
UI 라이브러리에서 제공하는 효과 목록
To use these effects you would have to download jQuery UI Library jquery-ui-1.7.2.custom.min.js or latest version of this UI library from jQuery UI Library.
After extracting jquery-ui-1.7.2.custom.min.js file from the download, you would include this file in similar way as you include core jQuery Library file.
| Methods and Description |
|---|
| Blind Blinds the element away or shows it by blinding it in. |
| Bounce Bounces the element vertically or horizontally n-times. |
| Clip Clips the element on or off, vertically or horizontally. |
| Drop Drops the element away or shows it by dropping it in. |
| Explode Explodes the element into multiple pieces. |
| Fold Folds the element like a piece of paper. |
| Highlight Highlights the background with a defined color. |
| Puff Scale and fade out animations create the puff effect. |
| Pulsate Pulsates the opacity of the element multiple times. |
| Scale Shrink or grow an element by a percentage factor. |
| Shake Shakes the element vertically or horizontally n-times. |
| Size Resize an element to a specified width and height. |
| Slide Slides the element out of the viewport. |
| Transfer Transfers the outline of an element to another. |
Reference : http://www.tutorialspoint.com/jquery/jquery-effects.htm
'💻 Programming > 웹프로그래밍' 카테고리의 다른 글
| [HTML 기본] HTML파일에 자바스크립트 파일 링크/import/include하기 (0) | 2019.07.10 |
|---|---|
| 이클립스에 스프링부트 설치하기 (Install SpringBoot in Eclipse) (0) | 2019.06.26 |
| [jQuery] 9. AJAX (0) | 2016.06.12 |
| [jQuery] 8. Event Handling ( 이벤트 핸들링 ) (0) | 2016.06.12 |
| [jQuery] 7. DOM Manipulation Methods ( DOM 조작 메소드 ) (0) | 2016.06.12 |