Blind Effect

コンテナに要素をラップし、ブラインドを引いたり上げたりするようなエフェクトで要素の表示・非表示を行います。

blind

引数説明
direction

初期値:"up"
型:String

ブラインドエフェクトが非表示になるために動作する方向を指定します。
指定可能な値は、up, down, left, right, vertical, horizontal です。

(ver 1.8は、vertical, horizontal)

アニメーションのコンテナはoverflow: hiddenが適用され、heightの変更が見た目に影響を与えます。

サンプル

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>blind demo</title>
  6. <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
  7. <style>
  8. p {margin-top:0; margin-bottom:2px; font-size:14px;}
  9. #toggle {
  10. width: 100px;
  11. height: 100px;
  12. background: #ccc;
  13. }
  14. </style>
  15. <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  16. <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  17. </head>
  18. <body>
  19. <p>どこかをクリックしてエフェクトを確認してください。</p>
  20. <div id="toggle"></div>
  21. <script>
  22. $( document ).click(function() {
  23. $( "#toggle" ).toggle( "blind" );
  24. });
  25. </script>
  26. </body>
  27. </html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM