|
|
8³â Àü
|
jQuery Sliding´Â ¾î¶² ³»¿ëÀÌ À§, ¾Æ·¡·Î ½½¶óÀ̵ùÇÏ°Ô ÇÏ´Â ¿ªÇÒÀ» ÇÕ´Ï´Ù.
slide Á¾·ù¿¡´Â slideDown(), slideUp(), slideToggle() ÀÌ ÀÖ½À´Ï´Ù.
slideDown()
±âº» ¹®±¸´Â $(selector).slideDown(speed,callback); ó·³ »ç¿ëÇÕ´Ï´Ù.
°ýÈ£() ¾È¿¡ ¼ýÀÚ¸¦ ³Ö¾î ¼Óµµ¸¦ Á¶ÀýÇÒ ¼ö ÀÖÀ¸¸ç, "slow", "fast" µîÀ» »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.
$("#flip").click(function(){
$("#panel").slideDown();
});
°ü·Ã¿¹Á¦
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">ÀÌ°÷À» Ŭ¸¯Çغ¸¼¼¿ä!!</div>
<div id="panel">¾È³çÇϼ¼¿ä<br>Park'sÀÇ ºí·Î±× ÀÔ´Ï´Ù.</div>
</body>
</html>
// div ¿µ¿ª "flip" À» Ŭ¸¯Çϸé "¾È³çÇϼ¼¿ä ~" ³»¿ëÀÌ ¾Æ·¡·Î ½½¶óÀ̵ù µË´Ï´Ù.
slideUp()
±âº» ¹®±¸´Â $(selector).slideUp(speed,callback); ó·³ »ç¿ëÇÕ´Ï´Ù.
°ýÈ£() ¾È¿¡ ¼ýÀÚ¸¦ ³Ö¾î ¼Óµµ¸¦ Á¶ÀýÇÒ ¼ö ÀÖÀ¸¸ç, "slow", "fast" µîÀ» »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.
$("#flip").click(function(){
$("#panel").slideUp();
});
°ü·Ã¿¹Á¦
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">ÀÌ°÷À» Ŭ¸¯Çغ¸¼¼¿ä!!</div>
<div id="panel">¾È³çÇϼ¼¿ä<br>Park'sÀÇ ºí·Î±× ÀÔ´Ï´Ù.</div>
</body>
</html>
// div ¿µ¿ª "flip" À» Ŭ¸¯Çϸé "¾È³çÇϼ¼¿ä ~" ³»¿ëÀÌ À§·Î ½½¶óÀ̵ù µË´Ï´Ù.
slideToggle()
ÀÌÀü ³»¿ë¿¡¼µµ Toggle()Àº µÎ °¡Áö¸¦ µ¿½Ã¿¡ ½ÇÇàÇÕ´Ï´Ù. ¿©±â¼´Â up, downÀ» µ¿½Ã¿¡ ½ÇÇàÇÕ´Ï´Ù.
°ü·Ã¿¹Á¦¸¦ º¸½Ã°í È®ÀÎÇغ¸½Ã±â ¹Ù¶ø´Ï´Ù. ±×¸®°í »ç¿ë¹ýÀº À§¿Í µ¿ÀÏ ÇÕ´Ï´Ù.
°ü·Ã¿¹Á¦
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">ÀÌ°÷À» Ŭ¸¯Çغ¸¼¼¿ä!!</div>
<div id="panel">¾È³çÇϼ¼¿ä<br>Park'sÀÇ ºí·Î±× ÀÔ´Ï´Ù.</div>
</body>
</html>
// id flipÀ» Ŭ¸¯À» ÇÏ¸é ³»¿ëÀÌ À§, ¾Æ·¡·Î ½½¶óÀ̵ù µË´Ï´Ù. °ü·Ã¿¹Á¦¸¦ Âü°í·Î Á÷Á¢ ¿©·¯°¡Áö ÇüÅ·ΠÀÛ¼ºÇغ¸½Ã±â ¹Ù¶ø´Ï´Ù.
±×¸®°í °ýÈ£ toggle()¾È¿¡ ¼ýÀÚ(1000,3000), "slow", "fast" µîÀ» ³Ö¾î¼ ¼Óµµ°¡ ¾î¶»°Ô Ʋ¸®Áö´ÂÁö Å×½ºÆ® Á÷Á¢ Çغ¸½Ã±â ¹Ù¶ø´Ï´Ù.
ÀÀ¿ëÀ» ¸¹ÀÌ ÇغÁ¾ß ½Ç·ÂÀÌ Á¶±Ý¾¿ ´Ã°Åµç¿ä.
´ÙÀ½ Àå¿¡¼´Â jQuery Effects - Animation È¿°ú¿¡ ´ëÇØ ¾Ë¾Æº¸°Ú½À´Ï´Ù. Animation Àº ¸»±×´ë·Î ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ ¸¸µé¼ö ÀÖ½À´Ï´Ù. Àç¹ÌÀÖ°í ½Å±âÇÑ È¿°ú¸¦ °æÇèÇϽǼö ÀÖ½À´Ï´Ù.
|
|
̵̧ : 287 |
̵̧
¸ñ·Ï
|
|