iT邦幫忙

5

javascript的範例學習:以jQuery為例(八),callback 之二

jQuery裏的動畫效果是最讓人激賞的,
其實很多jQuery的使用者,在設計效果時,就是用callback了,如手冊上http://api.jquery.com/fadeIn/淡出效果,宣告為

.fadeIn( [duration] [, callback] )
.fadeIn( [duration] [, easing] [, callback] )

,或是隱藏的用法
http://api.jquery.com/hide/

.hide( duration [, callback] )

這些都是回呼函數的用法,常用的開發者,應該都很熟悉,就是筆者比較不熟。
在fadeIn的範例裏,原寫法是:

       $("a").click(function () {
          $("div").fadeIn(3000, function () {
            $("span").fadeIn(100);
          });
          return false;
        }); 

我試著改成,

     $("a").click(function () {
          $("div").fadeIn(3000, function () {
            $("span").fadeIn(100);
            $("span").fadeOut(1000);
            $("span").fadeIn(1000 );
            $("span").fadeOut(1000);
            $("span").fadeIn(1000);
            $("span").fadeOut(1000);
            $("span").fadeIn(1000);
            $("span").fadeOut(1000);
    
          });
          return false;
        }); 

這時候,一直fadeIn/fadeOut/fadeIn/fadeOut/fadeIn/fadeOut有閃爍blingbling的效果,
接著我再實驗,callback裏再嵌套callback, 試試看,
改成

      $("a").click(function () {
          $("div").fadeIn(3000, function () {
            $("span").fadeIn(100, function () {
                $("span").fadeOut(1000,function () {
                    $("span").fadeIn(1000,function () {
                        $("span").fadeOut(1000,function () {
                            $("span").fadeIn(1000);                        
                            })
                        })
                    })
                })
          });
          return false;
        }); 

效果看起來是大同小異,也是Bling, Bling的效果 。

讓筆者比較熟悉callback裏再callback, 小括號包在大括號的外面。

小結:嵌套的callback型式,對JS也是可以允許的,在網路上比較少看到這類寫法的意義探討,
可能實用性不高。


2 則留言

0
ted99tw
iT邦高手 1 級 ‧ 2012-08-05 19:41:40

分享完,記得要看水上芭蕾......唱歌

0
timloo
iT邦研究生 2 級 ‧ 2012-08-06 17:40:05

昨天晚上,陪著女兒把雙人組看完,
華視的評論員是女兒的教練,
常常聊天的朋友,
突然上了電視,
覺得,
一方面恭禧他,多年的辛苦有了一點回報,也許不是金錢上的回報,

另一方面,就是年過40一事無成的失落。

評論員朋友(施先生)是最近的刺激 。

還是加油。

ted99tw iT邦高手 1 級 ‧ 2012-08-06 17:45:28 檢舉

昨晚印象最深刻的是南北兩韓選手演出,那麼拼命的國家想要不出人頭地也難...

加油再加油!!....管它油價漲不漲....

我要留言

立即登入留言