1. 程式人生 > >jQuery入門學習之slideToggle()和bind()方法

jQuery入門學習之slideToggle()和bind()方法

  speed:三種預定速度("slow","normal","fast")還有表示動畫時長的毫秒數值(如:1000)
  [callback] 在動畫完成時執行的函式
  例子:
  html: <p>這是測試用的dddddddddddddddddd<br />
        
            dddddddddddddddddddddddddddddd<br />
     
            ddddd</p>
  $(document).ready(function(){
      $("p").slideToggle("fast",function(){
      alert("Animation Done.");
       });
    });
   在瀏覽器看了下,是有效果的,這行字很快就滑動消失了。
   如果你給這個P標籤加個樣式,style=“display:none”,那麼這個段落,就會慢慢的出現,而不是消失了。
   
   這樣無緣無故的消失,感覺不太好,突然記起昨天看了一個bind()方法,是為元素繫結一個事件處理函式的,
   用它也可,動手修改了下這個方法,嗯哪,效果還可以。
        $(document).ready(function(){
        $("p").bind("click",function(){
           $(this).slideToggle("fast",function(){
            alert("Animation Done.");
            });
           });
         });
 樣式加不加也可以,總之,主要是這個方法。
 bind方法詳解:為每一個匹配元素的特定事件(像click)繫結一個事件處理器函式。
               這個事件處理函式會接收到一個事件物件,可以通過它來阻止(瀏覽器)預設的行為。如果
               既想取消預設的行為,又想阻止事件起泡,這個事件處理函式必須返回false。

用法一:可以把時間的處理函式定義為匿名函式
         $("p").bind("click",function(){
           $(this).slideToggle("fast",function(){
            alert("Animation Done.");
            });
           });
用法二:在不可能定義匿名函式的情況下,可以傳遞一個可選的資料物件作為第二個引數,那麼事件處理函式就變成第三個引數了
       function handler(event) {
            alert(event.data.foo);
            }
   $("p").bind("click", {foo: "bar"}, handler)
其實這個bind的方法,可以取消瀏覽器的預設行為並防止事件起泡,因為對於這兩個都不是很熟悉,所以暫時不寫如何
解決這個兩個問題,打算先去看瀏覽器的預設行為和事件起泡是怎麼一回事去……