JavaScript + Ajax 実践サンプル集

コンテンツを消す

説明補足説明コードコメント投稿

このサンプルは、jQueryのanimate()APIを利用してdiv要素に宣言されているコンテンツを消します。サンプルの[X]ボタンをクリックすると、そのコンテンツがアニメーション付きで消えます。

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Disappear</title>
<style type="text/css">
body {
	margin: 10px auto;
	width: 470px;
}
h3 {
	margin: 0;
	padding: 0 0 .3em;
}
p {
	margin: 0;
	padding: 0 0 .5em;
}
.pane {
	background: #edf5e1;
	padding: 10px 20px 10px;
	position: relative;
	border-top: solid 2px #c4df9b;
}
.pane .delete {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}
</style>
<script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
						   
	$(".pane .delete").click(function(){
		$(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
	});

});
</script>

</head>

<body>

<div class="pane">
	<h3>Sample Heading #1</h3>
	<p>
	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
	  Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, 
	  commodo lacinia massa diam vel eros. Proin eget urna. 
	  Nunc fringilla neque vitae odio. Vivamus vitae ligula.
  </p>
	<img src="images/tutorials/btn-delete.gif" alt="delete" class="delete" />
</div>

<div class="pane">
	<h3>Sample Heading #2</h3>
	<p>
	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
	  Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, 
	  commodo lacinia massa diam vel eros. Proin eget urna. 
	  Nunc fringilla neque vitae odio. Vivamus vitae ligula.
  </p>	
  <img src="images/tutorials/btn-delete.gif" alt="delete" class="delete" />
</div>

<div class="pane">
	<h3>Sample Heading #3</h3>
	<p>
	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
	  Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, 
	  commodo lacinia massa diam vel eros. Proin eget urna. 
	  Nunc fringilla neque vitae odio. Vivamus vitae ligula.
  </p>	
  <img src="images/tutorials/btn-delete.gif" alt="delete" class="delete" />
</div>

</body>
</html>

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

ここでは、img要素にclick時のイベントハンドラを登録しています。[x]ボタンをクリックするとclick時のイベントハンドラが実行されます。イベントハンドラで$(this)を使用していますが、img要素をポイントしています。親のdiv要素を取得するには、parents(".pane")のようにparents()APIを使用します。

このサンプルで使用している削除ボタンのアイコンです。イメージを右クリックしてダウンロードしてください。

$(".pane .delete").click(function(){
  $(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
});

<div class="pane">
  <h3>Sample Heading #1</h3>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, 
    commodo lacinia massa diam vel eros. Proin eget urna. 
    Nunc fringilla neque vitae odio. Vivamus vitae ligula.
  </p>
  <img src="images/tutorials/btn-delete.gif" 
    alt="delete" class="delete" />
</div>

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

コンテンツを消す