JavaScript + Ajax 実践サンプル集

Effcts Show/Hide(Scale)

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQuery UIのtoggleプラグインを利用してscaleエフェクトを実装しています。ボックスの見出し「Scale」をクリックするとボックスが徐々に縮小しながら消えます。再度クリックするとボックスが表示されます。

$(".toggler").click(function() {   
  $("> :eq(0)", this).toggle("scale");   
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery UI Effects - Scale Demo</title>
<link href="jQuery/UI/ui.all.css" rel="stylesheet" type="text/css" />  
<link href="jQuery/UI/demos.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	.toggler { width: 500px; height: 300px; }
	#scale { width: 240px; height: 135px; padding: 0.4em; }
	#scale h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script src="jQuery/jquery-1.3.1.js" type="text/javascript"></script>
<script src="jQuery/UI/effects.core.js" type="text/javascript"></script>
<script src="jQuery/UI/effects.scale.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
    $(".toggler").click(function() {
      $("> :eq(0)", this).toggle("scale");
    });
  });
</script>
</head>
<body>

<div class="toggler">
	  <div id="scale" class="ui-widget-content ui-corner-all">
		  <h3 class="ui-widget-header ui-corner-all">Scale</h3>
      <p>
        Lorem ipsum quo ex duis probo appetere, alii splendide ullamcorper te per. 
        Nibh feugiat nec id, has ne atqui diceret copiosae. 
        Solet aperiri repudiandae eam ut, te probo vitae aliquid sit.
      </p>
	  </div>
  </div>

</div>

</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

Effcts Show/Hide(Scale)

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

Effcts Show/Hide(Scale)

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5