JavaScript + Ajax 実践サンプル集 - jQuery 1.4のdelay()の使い方

jQuery 1.4のdelay()の使い方

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

このサンプルは、jQuery 1.4のdelay()メソッドを利用してアニメーションを一時的にポーズさせます。サンプルの[Animate]ボタンをクリックするとピンクのボックスが右に移動します。そして、指定した時間(3秒)だけポーズして元の位置に戻ります。

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

$('#animatethis').animate({left: '+=100'}, 1000, function()	{				  
  $(this).html('delayed for ' + numofseconds + ' seconds!');  
  $(this).delay(numofmilliseconds).animate({left: '-=100'}, 1000, function(){
    $(this).html('');
  });
});

<!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 1.4 - delay() method </title>
  <style type="text/css">
    #animatethis
    {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 32px;
      left: 50px;
      background-color: #ff7780;
      z-index: 9999;
    }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
	    $('#btnAnimate').click(function()	{		    
		    var numofseconds = $('input:text').val();
		    if(numofseconds === '' || isNaN(numofseconds) === true)	{
			    alert('Please enter a valid number.');
		    }
		    else {
			    var numofmilliseconds = numofseconds * 1000;
			    var pos = $('#animatethis').position();
			    var leftpos = pos.left;
			    $('#animatethis').animate({left: '+=100'}, 1000, function()	{				  
				    $(this).html('delayed for ' + numofseconds + ' seconds!');  
				    $(this).delay(numofmilliseconds).animate({left: '-=100'}, 1000, function(){
					    $(this).html('');
				    });
			    });
		    }
	    });
    });  
  </script>

</head>
<body>
  Number of Seconds to Delay:
  <input type="text" name="seconds" value="3" size="3" maxlength="3" />
  <button id="btnAnimate">Animate</button>
  <div id="animatethis"></div>
  <br /><br /><br /><br /><br /><br /><br />
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

jQuery 1.4のdelay()の使い方

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

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

jQuery 1.4のdelay()の使い方

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

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