【Javascript】jQueryのFadingエフェクト3

jQueryのFadingエフェクト3

---

1: fadeTo( speed,opacity )
2: 第1引数speed
3: fadeTo( speed,opacity,callback )

fadeTo( speed,opacity,callback )

fadeToメソッドも、これまでのfadeIn, fadeOutメソッドと同様に、動作完了後に起動させるコールバック関数を引数として渡すことができます。ただし、第2引数はopacityなので、これは第3引数に渡します。 コールバックは、フェイドアウト終了後に動作します。

では、サンプルです。ボタンをクリックしてみてください。



ボタンをクリックすると、"slow"スピードで、フェイドアウトをはじめ、終了すると「半透明化完了」とダイアログ表示されます。
コードは次のとおりです。

<style>
.divs{
  height  :100px;
  width   :100px;
  padding :10px;
  background-color:#aa88ff;
}
</style>
<div id="test1">
  <div id="s" class="divs">slow</div>
  <button>slow</button>
</div>

<script type="text/javascript">
 jQuery(function($){

   $("button","#test1")
     .click(function () {
       $("div","#test1")
         .fadeTo("slow",0.2,function(){
            alert("半透明化完了");
         });
     })

 });
</script>