Where The Streets Have No Name

jQuery 기본 예제 모음(8) : Effect 본문

Developement/Web

jQuery 기본 예제 모음(8) : Effect

highheat 2008. 4. 10. 19:37
출처 : http://apmusers.com/tt/dbckdghk/59

<Effect>

1. show( )  Returns: jQuery
Displays each of the set of matched elements if they are hidden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("p").show()
  });
  </script>

</head>
<body>
  <p style="display:none">Hello</p>
</body>
</html>



2. show( speed, callback )  Returns: jQuery
Show all matched elements using a graceful animation and firing an optional callback after completion.
##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).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("button").click(function () {
     $("p").show("slow");
   });

  });
  </script>
  <style>
  p { background:yellow; }
  </style>
</head>
<body>
  <button>Show it</button>
  <p style="display: none">Hello</p>
</body>
</html>



3. hide( )  Returns: jQuery
Hides each of the set of matched elements if they are shown.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("p").hide();
   $("a").click(function () {
     $(this).hide();
     return false;
   });

  });
  </script>

</head>
<body>
  <p>Hello</p>
  <a href="#">Click to hide me too</a>
  <p>Here is another paragraph</p>
</body>
</html>



4. hide( speed, callback )  Returns: jQuery
Hide all matched elements using a graceful animation and firing an optional callback after completion.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("button").click(function () {
     $("p").hide("slow");
   });

  });
  </script>
  <style>
  p { background:#dad; font-weight:bold; }
  </style>
</head>
<body>
  <button>Hide 'em</button>
  <p>Hiya</p>
  <p>Such interesting text, eh?</p>
</body>
</html>



5. toggle( )  Returns: jQuery
Toggles each of the set of matched elements.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("button").click(function () {
     $("p").toggle();
   });

  });
  </script>

</head>
<body>
  <button>Toggle</button>
  <p>Hello</p>
  <p style="display: none">Good Bye</p>
</body>
</html>



6. slideDown( speed, callback )  Returns: jQuery
Reveal all matched elements by adjusting their height and firing an optional callback after completion.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $(document.body).click(function () {
     if ($("div:first").is(":hidden")) {
       $("div").slideDown("slow");
     } else {
       $("div").hide();
     }
   });

  });
  </script>
  <style>
  div { background:#de9a44; margin:3px; width:80px;
       height:40px; display:none; float:left; }
  </style>
</head>
<body>
  Click me!
  <div></div>
  <div></div>
  <div></div>
</body>
</html>



7. slideUp( speed, callback )  Returns: jQuery
Hide all matched elements by adjusting their height and firing an optional callback after completion.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $(document.body).click(function () {
     if ($("div:first").is(":hidden")) {
       $("div").show("fast");
     } else {
       $("div").slideUp();
     }
   });

  });
  </script>
  <style>
  div { background:#3d9a44; margin:3px; width:80px;
       height:40px; float:left; }
  </style>
</head>
<body>
  Click me!
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>





8. slideToggle( speed, callback )  Returns: jQuery
Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("button").click(function () {
     $("p").slideToggle("slow");
   });

  });
  </script>
  <style>
  p { width:400px; }
  </style>
</head>
<body>
  <button>Toggle</button>
  <p>
   This is the paragraph to end all paragraphs.  You
   should feel <em>lucky</em> to have seen such a paragraph in
   your life.  Congratulations!
  </p>
</body>
</html>



9. fadeIn( speed, callback )  Returns: jQuery
Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $(document.body).click(function () {
     $("div:hidden:first").fadeIn("slow");
   });

  });
  </script>
  <style>
  span { color:red; cursor:pointer; }
  div { margin:3px; width:80px; display:none;
       height:80px; float:left; }
  div#one { background:#f00; }
  div#two { background:#0f0; }
  div#three { background:#00f; }
  </style>
</head>
<body>
  <span>Click here...</span>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</body>
</html>




10. fadeOut( speed, callback )  Returns: jQuery
Fade out all matched elements by adjusting their opacity and firing an optional callback after completion.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("p").click(function () {
     $("p").fadeOut("slow");
   });

  });
  </script>
  <style>
  p { font-size:150%; cursor:pointer; }
  </style>
</head>
<body>
  <p>
   If you click on this paragraph
   you'll see it just fade away.
  </p>
</body>
</html>



11. fadeTo( speed, opacity, callback )  Returns: jQuery
Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("p:first").click(function () {
     $(this).fadeTo("slow", 0.33);
   });

  });
  </script>

</head>
<body>
  <p>
   Click this paragraph to see it fade.
  </p>
  <p>
   Compare to this one that won't fade.
  </p>
</body>
</html>



12. animate( params, duration, easing, callback )  Returns: jQuery
A function for making your own, custom animations.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("#right").click(function(){
     $(".block").animate({"left": "+=50px"}, "slow");
   });

   $("#left").click(function(){
     $(".block").animate({"left": "-=50px"}, "slow");
   });

  });
  </script>
  <style>
  div {
   position:absolute;
   background-color:#abc;
   left:50px;
   width:90px;
   height:90px;
   margin:5px;
  }
  </style>
</head>
<body>
  <button id="left">≪</button> <button id="right">≫</button>
<div class="block"></div>

</body>
</html>



13. animate( params, options )  Returns: jQuery
A function for making your own, custom animations.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   // Using multiple unit types within one animation.
   $("#go").click(function(){
     $("#block").animate({
       width: "70%",
       opacity: 0.4,
       marginLeft: "0.6in",
       fontSize: "3em",
       borderWidth: "10px"
     }, 1500 );
   });

  });
  </script>
  <style>
  div {
   background-color:#bca;
   width:100px;
   border:1px solid green;
  }
  </style>
</head>
<body>
  <button id="go">≫ Run</button>
  <div id="block">Hello!</div>
</body>
</html>



14. stop( )  Returns: jQuery
Stops all the currently running animations on all the specified elements.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   // Start animation
   $("#go").click(function(){
     $(".block").animate({left: '+=100px'}, 2000);
   });

   // Stop animation when button is clicked
   $("#stop").click(function(){
     $(".block").stop();
   });

   // Start animation in the opposite direction
   $("#back").click(function(){
     $(".block").animate({left: '-=100px'}, 2000);
   });

  });
  </script>
  <style>div {
   position: absolute;
   background-color: #abc;
   left: 0px;
   top:30px;
   width: 60px;
   height: 60px;
   margin: 5px;
  }
  </style>
</head>
<body>
  <button id="go">Go</button>
  <button id="stop">STOP!</button>
  <button id="back">Back</button>
  <div class="block"></div>
</body>
</html>



15. queue( )  Returns: Array<Function>
Returns a reference to the first element's queue (which is an array of functions).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("#show").click(function () {
     var n = $("div").queue("fx");
     $("span").text("Queue length is: " + n.length);
   });
   function runIt() {
     $("div").show("slow");
     $("div").animate({left:'+=200'},2000);
     $("div").slideToggle(1000);
     $("div").slideToggle("fast");
     $("div").animate({left:'-=200'},1500);
     $("div").hide("slow");
     $("div").show(1200);
     $("div").slideUp("normal", runIt);
   }
   runIt();

  });
  </script>
  <style>
  div { margin:3px; width:40px; height:40px;
       position:absolute; left:0px; top:30px;
       background:green; display:none; }
  div.newcolor { background:blue; }
  span { color:red; }
  </style>
</head>
<body>
  <button id="show">Show Length of Queue</button>
  <span></span>
  <div></div>
</body>
</html>



16. queue( callback )
Adds a new function, to be executed, onto the end of the queue of all matched elements.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $(document.body).click(function () {
     $("div").show("slow");
     $("div").animate({left:'+=200'},2000);
     $("div").queue(function () {
       $(this).addClass("newcolor");
       $(this).dequeue();
     });
     $("div").animate({left:'-=200'},500);
     $("div").queue(function () {
       $(this).removeClass("newcolor");
       $(this).dequeue();
     });
     $("div").slideUp();
   });

  });
  </script>
  <style>
  div { margin:3px; width:40px; height:40px;
       position:absolute; left:0px; top:30px;
       background:green; display:none; }
  div.newcolor { background:blue; }
  </style>
</head>
<body>
  Click here...
  <div></div>
</body>
</html>



17. queue( queue )
Replaces the queue of all matched element with this new queue (the array of functions).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("#start").click(function () {
     $("div").show("slow");
     $("div").animate({left:'+=200'},5000);
     $("div").queue(function () {
       $(this).addClass("newcolor");
       $(this).dequeue();
     });
     $("div").animate({left:'-=200'},1500);
     $("div").queue(function () {
       $(this).removeClass("newcolor");
       $(this).dequeue();
     });
     $("div").slideUp();
   });
   $("#stop").click(function () {
     $("div").queue("fx", []);
     $("div").stop();
   });

  });
  </script>
  <style>
  div { margin:3px; width:40px; height:40px;
       position:absolute; left:0px; top:30px;
       background:green; display:none; }
  div.newcolor { background:blue; }
  </style>
</head>
<body>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <div></div>
</body>
</html>



18. dequeue( )  Returns: jQuery
Removes a queued function from the front of the queue and executes it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("button").click(function () {
     $("div").animate({left:'+=200px'}, 2000);
     $("div").animate({top:'0px'}, 600);
     $("div").queue(function () {
       $(this).toggleClass("red");
       $(this).dequeue();
     });
     $("div").animate({left:'10px', top:'30px'}, 700);
   });

  });
  </script>
  <style>
  div { margin:3px; width:50px; position:absolute;
       height:50px; left:10px; top:30px;
       background-color:yellow; }
  div.red { background-color:red; }
  </style>
</head>
<body>
  <button>Start</button>
  <div></div>
</body>
</html>
'Developement/Web' Related Articles more