JavaScript + Ajax 実践サンプル集 - Effects General(Pulsate)

Effects General(Pulsate)

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

このサンプルは、jQuery UIのeffect()プラグインを利用してpulsateエフェクトを実装しています。サンプルのボックスの見出し「Pulsate」をクリックするとボックスが電球のように点滅します。

$("#pulsate").click(function() {   
  $(this).effect("pulsate");   
});

<!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 - Pulsate 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">
	#pulsate { width: 240px; height: 135px; padding: 0.4em; }
	#pulsate 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.pulsate.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
    $("#pulsate").click(function() {
      $(this).effect("pulsate");
    });
  });
</script>
</head>
<body>

<div id="pulsate" class="ui-widget-content ui-corner-all">
	  <h3 class="ui-widget-header ui-corner-all">Pulsate</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>

</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

Effects General(Pulsate)

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

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

Effects General(Pulsate)

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

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