無職のプログラミング

  var senddata = {};  // サーバーへ送信するデータ
  for(var i=0;i<10;i++){
    // 送信データとして乱数を作成
    senddata[i] = Math.floor(Math.random()*10) + 1;
  }
  // サーバーへ送信ボタン追加
  var $div = $("#div1");
  var $button = $("<button/>").addClass("sbtn").attr("id","sbtn");
  $button.text("サーバーへ送信");
  $button.data("senddata",senddata);  // 送信ボタンに送信データを格納
  $button.click(ajaxsend);
  $div.append($button);

var ajaxsend = function(){
  $.ajax({url: "./ajaxtest.php",  // 実行されるURL
    type: "POST",
    data: $("#sbtn").data("senddata")  // 送信データ
  });
};

foreach($_POST as $key => $value)

// <div></div>という要素のjQueryオブジェクトを作成し、$jqObjに格納する
var $jqObj = $("<div/>");  

var bcolorArr = new Array(略);  // 子要素の色
var $div = $("#main");  // 親要素取得
var $jqObj;  // 子要素
for(var i=0;i<bcolorArr.length;i++){
  //  jQueryオブジェクトを作成し、CSSクラス、CSSプロパティ、id属性を付与する
  $jqObj = $("<div/>").addClass("box").css("backgroundColor",bcolorArr[i])
    .attr("id","id" + (i+1));
  // jQueryオブジェクトを子要素として追加する
  $div.append($jqObj);
}

$("body").append($jqObj);

for(var i=0;i<3;i++){
  $("#id"+(i+1)).delay(interval).fadeOut(500).fadeIn(500);
  interval += 1500;
}

  $("#id"+(i+1)).delay(interval).fadeOut(500).fadeIn(500);

// boxを10個作成 (boxのcssは略)
var $div = $("#main");  // htmlに記述している親ノード
var $box;
for(var i=0;i<10;i++){
  $box = $("<div/>").addClass("box").attr("id","id" + (i+1));
  $div.append($box);
}

// ダミーdiv作成
var $dim = $("<div/>").attr("id","dimdiv")
  .css({"width":"1px","height":"1px","clear":"both"});
$("body").append($dim);

lockflg = false;  // true ならアニメーション中。アニメーション中はイベントを無視する
var blinkbox = function(){
  // アニメーション中はイベントを無視
  if(lockflg){return false;}
  lockflg = true;
  
  var blinkseq = [];  // 点滅するboxの番号を順番に並べた配列
  for(var i=0;i<10;i++){
    blinkseq[i] = i+1;
  }
  var blinktime = 400;  // fadeIn/fadeOutそれぞれに要する時間(ミリ秒)
  var interval = blinktime * 3;  // 次の点滅処理を行うまでのwait時間
  var $dim = $("#dimdiv");  // ダミーdivタグ
  var calledno = 0;  // callbackfが何度呼ばれたかカウント用
  // ダミーdivタグのアニメーション後に呼ばれるcallback関数
  var callbackf = function(){$("#id"+ blinkseq[calledno]).fadeOut(blinktime).fadeIn(blinktime);
                calledno++;};
  
  // boxを順番に点滅させる
  for(var i=0;i<blinkseq.length;i++){
    $dim.toggle(1,callbackf);
    if(i==(blinkseq.length - 1)){
      // 最後にlockflgをfalseにする
      $dim.toggle(blinktime * 2,function(){lockflg = false;});
    }else{
      $dim.delay(interval);
    }
  }
}

var calledno = 0;  // callbackfが何度呼ばれたかカウント用
// ダミーdivタグのアニメーション後に呼ばれるcallback関数
var callbackf = function(){$("#id"+ blinkseq[calledno]).fadeOut(blinktime).fadeIn(blinktime);
              calledno++;};

$("#id1").fadeOut(500).fadeIn(500).hide(500).show(500)
  .fadeOut(500).fadeIn(500);

$("#id1").fadeOut(500);
$("#id1").fadeIn(500);
$("#id1").hide(500);
$("#id1").show(500);
$("#id1").fadeOut(500);
$("#id1").fadeIn(500);

$("#id1").fadeOut(500).fadeIn(500).hide().show(500)
  .fadeOut(500).fadeIn(500);

for(var i=0;i<3;i++){
  $("#id"+(i+1)).fadeOut(500).fadeIn(500);
}

var interval = 0;
for(var i=0;i<3;i++){
  $("#id"+(i+1)).delay(interval).fadeOut(500).fadeIn(500);
  interval += 1500;
}

// lockflgは、既にグローバル変数として初期値falseで宣言されている。
if(lockflg){return false;}  // lockflg == true なら処理しない
lockflg = true;
var interval = 0;
for(var i=0;i<3;i++){
  $("#id"+(i+1)).delay(interval).fadeOut(500).fadeIn(500);
  interval += 1500;
}
$("#id3").fadeIn(1,function(){lockflg = false;});  // lockflgをfalseにするためのダミー処理

if(lockflg){return false;}  
lockflg = true;
var interval = 0;
for(var i=0;i<3;i++){
  if(i==2){
    // 最後にlockflgをfalseにする
    $("#id"+(i+1)).delay(interval).fadeOut(500).fadeIn(500,function(){lockflg = false;});
  }else{
    $("#id"+(i+1)).delay(interval).fadeOut(500).fadeIn(500);
  }
  interval += 1500;
}

<div class="main"></div>

/* 背景 */
.main {
  display: block;
  border-style: solid;
  border-width: 1px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

/* ボックス */
.box {
  display: block;
  border-style: solid;
  position: absolute;
}

(function($) {
/* 定数 */
var aconst = {
  boxsidenum: 3,  // boxの一辺の個数 3x3
  boxwidth: 100,  // boxノードの width と height
  boxmargine: 3,  // boxノードの上左マージン
  boxbordwdh: 1  // boxノードの線の太さ
}
var boxcolord = new Array(略);  // boxの色

/* boxの行番号と列番号を求める
* boxnum boxの番号（１からの連番）
* return {raw: 行番号, col: 列番号}
*/
var getposition = function(boxnum){
  var rtnobj = {raw: 0, col: 0};
  if(isNaN(boxnum)){return rtnobj;}
  rtnobj.raw = Math.floor((boxnum -1) / aconst.boxsidenum) + 1;
  var remainder = boxnum % aconst.boxsidenum;
  if (remainder == 0){
    rtnobj.col = aconst.boxsidenum;
  }else{
    rtnobj.col = remainder;
  }
  return rtnobj;
};

$(document).ready(function() {
  // 親ノードを作成
  var $div = $("div.main:first");  // 親ノード
  var mainwidth;  // 親ノードの width と height
  mainwidth = aconst.boxsidenum * (aconst.boxwidth + aconst.boxmargine + aconst.boxbordwdh * 2) + aconst.boxmargine;
  $div.css({"width": mainwidth + "px", "height": mainwidth + "px"});
      
  // boxノードを作成
  var $box;  // boxノード
  var boxnum = aconst.boxsidenum * aconst.boxsidenum;  // boxの個数
  var boxposition;  // ボックスの行番号と列番号 {raw: 行番号, col: 列番号}
  var topval,leftval;  // boxノードのtopとleftの値
  for(var i = 0; i < boxnum; i++){
    $box = $("<div/>").addClass("box");
    boxposition = getposition(i+1);
    topval = (boxposition.raw -1) * (aconst.boxwidth + aconst.boxmargine + aconst.boxbordwdh * 2) + aconst.boxmargine;
    leftval = (boxposition.col -1) * (aconst.boxwidth + aconst.boxmargine + aconst.boxbordwdh * 2) + aconst.boxmargine;
    $box.css({"backgroundColor": boxcolord[i],
        "width": aconst.boxwidth + "px", "height": aconst.boxwidth + "px",
        "borderWidth": aconst.boxbordwdh + "px",
        "top": topval + "px", "left": leftval + "px"});
    $div.append($box);
  }
});

})(jQuery);

<div class="main"></div>

/* 背景 */
.main {
  display: block;
  width: 500px;
  height: 300px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
/* 動かすボックス */
.box {
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0px;
}

var boxcolor = new Array("#66FFFF","#66CCFF","#6699FF");  // 動かすboxの色

$(document).ready(function() {
  // 動かすboxを構築
  var $div = $("div.main:first");  // 親ノード
  var $box;  // boxノード
  for(var i = 0; i < boxcolor.length; i++){
    $box = $("<div/>").addClass("box");
    $box.css("background-color",boxcolor[i]);
    $box.css("top",String(100 * i) + "px");
    $div.append($box);
  }
  $("div.box").click(movebox);
});

/* 定数 */
var aconst = {
  moveAttr: "moved",    // 要素にセットする属性名
  moveAfter: "400px",    // move後の offset left
  moveBefore: "0px",    // move前の offset left

  pdur: "normal",    // animateのduration 数値で指定する場合はミリ秒
  peasing: "swing"  // animateのeasing
}

var movebox = function(){
  var movedflg = $(this).attr(aconst.moveAttr);  // move後 "true" move前 "false"
  var leftval;  // animate後のleftの値
  if(movedflg == "true"){
    // move後
    leftval = aconst.moveBefore;
    movedflg = "false";
  }else{
    // move前
    leftval = aconst.moveAfter;
    movedflg = "true";
  }
  $(this).animate({left: leftval}, aconst.pdur, aconst.peasing,
    function(){$(this).attr(aconst.moveAttr,movedflg);} );
}

(function($) {

var animetest = {
  movebox: function(){
  $(this).animate({left: "400px"});
  }
}

$(document).ready(function() {
  $("div.box1").click(animetest.movebox);
});

})(jQuery);

$("div.box1").click(function(){$(this).animate({left: "400px"});});

margin-left: auto;
margin-right: auto;