スーパーウルトラグレートデリシャスワンダフルブログ

初心者の初心者による初心者のためのブログ

jQueryのDOM操作メソッド 〜エフェクト編〜

fadeOut - 要素をフェードアウトして非表示

fadeOutTarget
$("#fadeOut").on("click",function(){
  $(this).next(".fadeOutTarget").fadeOut("fast",function(){
    console.log(this);//アニメーション完了後にしたい処理
  });
});

fadeIn - 要素をフェードインして表示

$("#fadeIn").on("click",function(){
  $(this).next(".fadeInTarget").fadeIn("slow",function(){
    console.log(this);//アニメーション完了後にしたい処理
  });
});

fadeToggle - fadeInとfadeOutの切り替え

fadeToggleTarget
$("#fadeToggle").on("click",function(){
  $(this).next(".fadeToggleTarget").fadeToggle("normal",function(){
    console.log(this);//アニメーション完了後にしたい処理
  });
});

fadeTo - 指定したアニメーションでフェード処理

fadeToTarget
$("#fadeTo").on("click",function(){
  $(this).next(".fadeToTarget").fadeTo(1000,0.3,function(){
    console.log(this);//アニメーション完了後にしたい処理
  });
});

toggle - showとhideの切り替え

toggleTarget
$("#toggle").on("click",function(){
  $(this).next(".toggleTarget").toggle(1000,function(){
    console.log(this);//アニメーション完了後にしたい処理
  });
});

slideDown - スライドで要素を表示

$("#slideDown").on("click",function(){
  $(this).next(".slideDownTarget").slideDown(1000,function(){
    console.log(this);//アニメーション完了後にしたい処理
  });
});

slideUp - スライドで要素を非表示

slideUpTarget
$("#slideUp").on("click",function(){
  $(this).next(".slideUpTarget").slideUp(1000,function(){
      console.log(this);//アニメーション完了後にしたい処理
  });
});

slideToggle - slideDownとslideUpの切り替え

slideToggleTarget
$("#slideToggle").on("click",function(){
  $(this).next(".slideToggleTarget").slideToggle(1000,function(){
      console.log(this);//アニメーション完了後にしたい処理
  });
});

animate - 指定したcssのアニメーションの指定

animateTarget
$("#animate").on("click",function(){
  var animeteData = ({
    "background-color":"red",
    "color":"black",
    "height":"100px"
  });
  $(this).next(".animateTarget").animate(animeteData,"normal","linear",function(){
    console.log(this);//アニメーション完了後にしたい処理
  });
});