jQuery::非同期通信::Ajaxリクエスト::jQuery.getScript(url[, callback])の使用例

PHP & JavaScript Room :: 設置サンプル

実行結果

jQuery::非同期通信::Ajaxリクエスト::jQuery.getScript(url[, callback])の使用例

jQueryプラグインの「Color Animations」を動的に読み込み、新しい機能が読み込まれた後に1度だけ実行されるようにカラーアニメーションを結び付けます。

設置サンプルのソース

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <title>jQuery::非同期通信::Ajaxリクエスト::jQuery.getScript(url[, callback])の使用例</title>
   <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
   <!-- JS -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script>
      $(function(){
         $.getScript("/content/lib/jquery/jquery.color.js", function(){
            $("#go").click(function(){
               $(".block").animate( { backgroundColor:'orange' }, 1000).animate( { backgroundColor:'#ff6699' }, 1000);
            });
         });
       });
   </script>
   <style type="text/css">
      .block { background-color:#ff6699; width:150px; height:70px; }
   </style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<!-- CONTENT -->
   <h1>jQuery::非同期通信::Ajaxリクエスト::jQuery.getScript(url[, callback])の使用例</h1>
   <p><a href="http://plugins.jquery.com/project/color">jQueryプラグインの「Color Animations」</a>を動的に読み込み、新しい機能が読み込まれた後に1度だけ実行されるようにカラーアニメーションを結び付けます。</p>
<!-- CODE -->
   <p><button id="go">実行</button></p>
   <div class="block"></div>
<!-- / CODE -->
<!-- / CONTENT -->
</body>
</html>