無職のプログラミング

$("#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;
}

Math.floor(Math.random() * n) + 1

var n = 100; // この n の値を必要に応じて変える。とりあえず100にしてみた。

// 1～ｎまでの整数を順番に配列arrに格納
var arr = [];
for(var i=0; i<n; i++){ arr[i] = i+1; }

// ランダムに並べた結果を配列shuffledarrに格納
var shuffledarr = [];
var randomIndex;
for(var i=0; i<n; i++){
  randomIndex = Math.floor(Math.random()*arr.length);
  shuffledarr[i] = arr[randomIndex];
  arr.splice(randomIndex, 1);
}

for(var i=1; i<=n; i++){ arr[i] = i; }

var arg = [this];

var func = function(){
  ...
};

if ( ... ) {
  ...
} else {
  ...
}

var obj = {
  property1: 1,
  property2: "test",
  funciton1: function(){ ... }
};

var hash = { number: 1, "住所": "東京都", tel: "03-1234-5678"};

var a = {};

var arr = [1,3,"test"];

var a1 = arr[1];
var h1 = hash["住所"];
var o1 = obj["property1"];

var b = [];

var arg = [this];

<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;

(前略)
<style TYPE="text/css">
<!--
.parent { max-width: 500px; min-width: 200px; max-height: 30em; min-height: 20em; background-color: green;}
.child { width: 300px; height: 40em; background-color: yellow;}
-->
</style></head>
<body>
<div class="parent"><div class="child"></div></div>
</body></html>