JavaScript + Ajax 実践サンプル集

Effcts Show/Hide(Slide)

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

このサンプルは、jQuery UIのtoggleプラグインを利用してslideエフェクトを実装しています。ボックスの見出し「Slide」をクリックするとボックスがスライドする（滑る）ように徐々に消えます。再度クリックするとボックスがスライドして表示されます。

このサンプルを編集して試してみる

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

<!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 - Slide 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; }
	#slide { width: 240px; height: 135px; padding: 0.4em; }
	#slide 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.slide.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
    $(".toggler").click(function() {
      $("> :eq(0)", this).toggle("slide");
    });
  });
</script>
</head>
<body>

<div class="toggler">
	  <div id="slide" class="ui-widget-content ui-corner-all">
		  <h3 class="ui-widget-header ui-corner-all">Slide</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(Slide)

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

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

Effcts Show/Hide(Slide)

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

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