Các hiệu ứng trong jQuery

jQuery cung cấp nhiều phương thức để tạo các hiệu ứng sinh động cho trang web. Có thể tham khảo chi tiết về các phương thức tạo hiệu ứng động tại http://api.jquery.com/?s=effects. Trong chương này chỉ đề cập đến một vài hiệu ứng cơ bản sau:

  • Hiệu ứng ẩn/hiện
  • Hiệu ứng mờ hay rõ dần
  • Hiệu ứmg trượt
  • Hiệu ứng động

Hiệu ứng ẩn/hiện – hide/show

Chúng ta có thể tạo hiệu ứng ẩn (hide) hay hiện (show) các phần tử HTML với các phương thức hide() hay show():

Phương thức Chức năng
$(selector).hide(speed,callback); Ẩn phần tử selector với tốc độ speed. callback là hàm sẽ thực thi sau khi hàm hide hoàn thành. speed có thể là các chuỗi “slow”, “fast”, hay số mili giây như 1000, 2000,…
$(selector).show(speed,callback); Hiển thị phần tử selector với tốc độ speed. callback là hàm sẽ thực thi sau khi hàm show hoàn thành. speed có thể là các chuỗi “slow”, “fast”, hay số mili giây như 1000, 2000,…

Ví dụ ẩn phần tử p:

Đoạn mã HTML


<button>Hide</button>

<p>This is a paragraph with little content.</p>

<p>This is another small paragraph.</p>

Đoạn mã jQuery


$(document).ready(function(){

   $("button").click(function(){

      $("p").hide(1000);

   });

});

Ẩn phần tử p và sử dụng hàm callback


$(document).ready(function(){

   $("button").click(function(){

     $("p").hide(1000, function(){

         alert("Hide complete!");

     });

   });

});

Ví dụ hiển thị phần tử p với callback

Đoạn mã HTML


<button>Show</button>

<p style="display:none">This is a paragraph with little content.</p>

<p style="display:none">This is another small paragraph.</p>

Đoạn mã jQuery


$(document).ready(function(){

   $("button").click(function(){

     $("p").show(1000, function(){

        alert("Show complete!");

     });

   });

});

Chúng ta có thể dùng phương thức toggle() để chuyển đổi giữa hiệu ứng ẩn/ hiện – là sự kết hợp giữa hide() và show():

Phương thức Chức năng
$(selector).toggle(speed,callback); Ẩn/hiện phần tử selector với tốc độ speed. callback là hàm sẽ thực thi sau khi hàm toggle hoàn thành. speed có thể là các chuỗi “slow”, “fast”, hay số mili giây như 1000, 2000,…

Ví dụ ẩn/ hiện phần tử p:

Đoạn mã HTML


<button>Toggle</button>

<p style="display:none">This is a paragraph with little content.</p>

<p style="display:none">This is another small paragraph.</p>

Đoạn mã jQuery


$(document).ready(function(){

   $("button").click(function(){

      $("p").toggle(1000, function(){

         alert("Toggle complete!");

       });

    });

});

Hiệu ứng hiển thị mờ dần hay rõ dần – fade

Với hiệu ứng fade, jQuery cung cấp các phương thức:

Phương thức Chức năng
$(selector).fadeIn(speed,callback); Hiển thị phần tử selector rõ dần với tốc độ speed. callback là hàm sẽ thực thi sau khi hàm fadeIn hoàn thành. speed có thể là các chuỗi “slow”, “fast”, hay số mili giây như 1000, 2000,…
$(selector).fadeOut(speed,callback); Hiển thị phần tử selector mờ dần với tốc độ speed. callback là hàm sẽ thực thi sau khi hàm fadeOut hoàn thành. speed có thể là các chuỗi “slow”, “fast”, hay số mili giây như 1000, 2000,…
$(selector).fadeToggle(speed,callback); Hiển thị phần tử selector mờ dần hay rõ dần với tốc độ speed. callback là hàm sẽ thực thi sau khi hàm fadeToggle hoàn thành. speed có thể là các chuỗi “slow”, “fast”, hay số mili giây như 1000, 2000,…
$(selector).fadeTo(

speed,opacity,callback);

 Hiển thị phần tử selector theo độ mờ (opacity) cho trước với tốc độ speed. callback là hàm sẽ thực thi sau khi hàm fadeTo hoàn thành. speed có thể là các chuỗi “slow”, “fast”, hay số mili giây như 1000, 2000,…opacity có giá trị từ 0 đến 1.

Ví dụ hàm fadeIn

Đoạn mã HTML


<button>Click to fade in boxes</button><br><br>

Đoạn mã jQuery


$(document).ready(function(){

  $("button").click(function(){

    $("#div1").fadeIn(3000);

  });

});

Có thể thêm callback đến fadeIn như sau:


$(document).ready(function(){

  $("button").click(function(){

    $("#div1").fadeIn(3000,function(){

       alert("fadeIn completed!");

    });

  });

});

Ví dụ hàm fadeOut

Đoạn mã HTML


<button>Click to fade in boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"> </div>

Đoạn mã jQuery


$(document).ready(function(){

   $("button").click(function(){

     $("#div1").fadeOut(3000);

   });

});

Có thể thêm callback đến fadeIn như sau:


$(document).ready(function(){

  $("button").click(function(){

    $("#div1").fadeOut(3000,function(){

       alert("fadeOut completed!");

    });

  });

});

Có thể dùng hàm fadeToggle() – là sự kết hợp giữa fadeIn() và fadeOut():

Đoạn mã HTML


<button>Click to fade in boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"> </div>

Đoạn mã jQuery


$(document).ready(function(){

  $("button").click(function(){

     $("#div1").fadeToggle(3000,function(){

       alert("fadeToggle completed!");

     });

  });

});

Có thể sử dụng fadeTo theo opacity cho trước:


$(document).ready(function(){

  $("button").click(function(){

    $("#div1").fadeTo(3000,0.5,function(){

      alert("fadeTo completed!");

    });

  });

});

Hiệu ứng trượt – slide

Với hiệu ứng trượt, jQuery cung cấp các phương thức:

Phương thức Chức năng
$(selector).slideDown(speed,callback); Hiển thị phần tử selector trượt xuống với tốc độ speed. callback là hàm sẽ thực thi sau khi hàm slideDown hoàn thành. speed có thể là các chuỗi “slow”, “fast”, hay số mili giây như 1000, 2000,…
$(selector).slideUp(speed,callback); Hiển thị phần tử selector trượt lên với tốc độ speed. callback là hàm sẽ thực thi sau khi hàm slideUp hoàn thành. speed có thể là các chuỗi “slow”, “fast”, hay số mili giây như 1000, 2000,…
$(selector).slideToggle(speed,callback); Hiển thị phần tử selector trượt lên hay trượt xuống với tốc độ speed. callback là hàm sẽ thực thi sau khi hàm slideToggle hoàn thành. speed có thể là các chuỗi “slow”, “fast”, hay số mili giây như 1000, 2000,…

Ví dụ dùng slideUp

Đoạn mã HTML

<div id="flip">

<div id="flip">Click to slide up panel</div>

<div id="panel">Hello world!</div>

Đoạn mã CSS


#panel, #flip {

   padding: 5px;

   text-align: center;

   background-color: #e5eecc;

   border: solid 1px #c3c3c3;

}

#panel {

   padding: 50px;

}

Đoạn mã jQuery


$(document).ready(function(){

  $("#flip").click(function(){

     $("#panel").slideUp("slow");

  });

});

Ví dụ dùng slideDown

Đoạn mã HTML


<div id="flip">Click to slide down panel</div>

<div id="flip">

<div id="panel">Hello world!</div>

Đoạn mã CSS


#panel, #flip {

  padding: 5px;

  text-align: center;

  background-color: #e5eecc;

  border: solid 1px #c3c3c3;

}

#panel {

  padding: 50px;

  display: none;

}

Đoạn mã jQuery


$(document).ready(function(){

  $("#flip").click(function(){

    $("#panel").slideDown("slow");

  });

});

Có thể kết hợp slideUp() và slideDown() với slideToggle():


$(document).ready(function(){

  $("#flip").click(function(){

    $("#panel").slideToggle("slow");

  });

});

Hiệu ứng động – animate

Chúng ta đã làm quen với các hiệu ứng ẩn/hiện, mờ/rõ, trượt nhưng đó chỉ là những hiệu ứng đơn giản. jQuery cung cấp phương thức animate có thể tạo những hiệu ứng sinh động hơn:

Phương thức Chức năng
$(selector).animate({params},speed,

callback);

 Tạo hiệu ứng động cho selector theo định dạng CSS cung cấp trong params với tốc độ speed. callback là hàm sẽ thực thi sau khi hàm animate hoàn thành. speed có thể là các chuỗi “slow”, “fast”, hay số mili giây như 1000, 2000,…

Ví dụ 1: tạo hiệu ứng animate đơn giản di chuyển phần tử div sang trái 250px

Đoạn mã HTML


<button>Start Animation</button>

<div style="background:#98bf21;height:100px;width:100px;

                                   position:absolute;">

</div>

Đoạn mã jQuery


$(document).ready(function(){

  $("button").click(function(){

    $("div").animate({left: '250px'});

  });

});

Ví dụ 2: tạo hiệu ứng animate với nhiều thuộc tính CSS được thêm đến div:

Đoạn mã HTML


<button>Start Animation</button>

<div style="background:#98bf21;height:100px;width:100px;

                                     position:absolute;">

</div>

Đoạn mã jQuery


$(document).ready(function(){

  $("button").click(function(){

    $("div").animate({

        left: '250px',

        opacity: '0.5',

        height: '150px',

        width: '150px'

    });

  });

});

Ví dụ 3: tạo hiệu ứng animate với nhiều thuộc tính CSS và giá trị tương đối (tăng hay giảm bằng cách thêm += hay -= trước giá trị ) đến div:

Đoạn mã HTML


<button>Start Animation</button>

<div style="background:#98bf21;height:100px;width:100px;

                                    position:absolute;">

</div>

Đoạn mã jQuery


$("button").click(function(){

  $("div").animate({

    left: '250px',

    height: '+=150px',

    width: '+=150px'

  });

});

Ví dụ 4: tạo nhiều hiệu ứng animate đến div:

Đoạn mã HTML


<button>Start Animation</button>

<div style="background:#98bf21;height:100px;width:100px;

                                     position:absolute;">

</div>

Đoạn mã jQuery


$("button").click(function(){

  var div = $("div");

  div.animate({height: '300px', opacity: '0.4'}, "slow");

  div.animate({width: '300px', opacity: '0.8'}, "slow");

  div.animate({height: '100px', opacity: '0.4'}, "slow");

  div.animate({width: '100px', opacity: '0.8'}, "slow");

});

Trong ví dụ trên, phần tử div có 4 phương thức animate hoạt động tuần tự (từ trên xuống). Nếu một phần tử có nhiều hiệu ứng, jQuery sẽ quản lý theo cơ chế hàng đợi (queue). 4 phương thức animate trên có thể viết lại theo kĩ thuật dây chuyền (tìm hiểu phần sau).

Dừng các hiệu ứng

Chúng ta có thể dừng các hiệu ứng với phương thức stop():

Phương thức Chức năng
$(selector).stop(stopAll,goToEnd) Ngừng hiệu ứng của phần tử selector. stopAll và goToEnd là hai tham số tuỳ chọn. stopAll nhận giá trị true sẽ dừng tất cả các hiệu ứng, nhận giá trị false (mặc định) chỉ dừng hiệu ứng hiện tại và các hiệu ứng kế tiếp (trong hang đợi) vẫn hoạt động bình thường. goToEnd nhận giá trị true nếu chúng ta muốn các hiệu ứng hiện tại hoàn thành ngay lập tức và không chuyển sang hiệu ứng kế tiếp trong hàng đợi, mặc định nhận giá trị false.

 Ví dụ 1: dừng hiệu ứng hiện tại (trong hàng đợi chứa hai phương thức animate)

Đoạn mã HTML


<div style="background:#98bf21;height:100px;width:200px;
             
                        position:absolute;">HELLO</div>

<button id="start">Start</button>

<button id="stop">Stop</button>

Đoạn mã jQuery


$(document).ready(function(){

   $("#start").click(function(){

       $("div").animate({left: '100px'}, 5000);

       $("div").animate({fontSize: '3em'}, 5000);

    });

   $("#stop").click(function(){

      $("div").stop();

   });

});

Khi chúng ta nhấn nút Start sẽ thực hiện hiệu ứng di chuyển phần tử div sang trái 100px – phương thức animate thứ nhất và sau đó tăng kích cỡ chữ (HELLO) lên 3em – phương thức animate thứ hai. Giả sử phần tử div đang di chuyển sang trái, khi nhấn nút Stop sẽ thực hiện phương thức Stop() để dừng hoạt động của phương thức animate thứ  nhất và chuyển sang phương thức animate thứ hai. Phương thức Stop() không nhận tham số nghĩa là cả hai tham số đầu nhận giá trị mặc định false.

Ví dụ 2: dừng tất cả hiệu ứng (trong hàng đợi chứa hai phương thức animate)

Đoạn mã HTML


<div style="background:#98bf21;height:100px;width:200px;

                         position:absolute;">HELLO</div>

<button id="start">Start</button>

<button id="stopall">Stop All</button>

Đoạn mã jQuery


$(document).ready(function(){

  $("#start").click(function(){

    $("div").animate({left: '100px'}, 5000);

    $("div").animate({fontSize: '3em'}, 5000);

  });

  $("#stop").click(function(){

    $("div").stop(true);

  });

});

Khi chúng ta nhấn nút Start sẽ thực hiện hiệu ứng di chuyển phần tử div sang trái 100px – phương thức animate thứ nhất và sau đó tăng kích cỡ chữ (HELLO) lên 3em – phương thức animate thứ hai. Khi nhấn nút Stop sẽ thực hiện phương thức Stop() dừng tất cả các hoạt động của cả hai phương thức animate. Phương thức Stop(true) nhận giá trị true cho tham số thứ nhất (stopAll) và không nhận giá trị cho tham số thứ hai (goToEnd) nghĩa là nhận giá trị mặc định cho tham số này là false.

Ví dụ 3: hoàn thành hiệu ứng hiện tại ngay lập tức (trong hàng đợi chứa hai phương thức animate)

Đoạn mã HTML


<div style="background:#98bf21;height:100px;width:200px;

                         position:absolute;">HELLO</div>

<button id="start">Start</button>

<button id="stopall">Stop All</button>

Đoạn mã jQuery


$(document).ready(function(){

  $("#start").click(function(){

    $("div").animate({left: '100px'}, 5000);

    $("div").animate({fontSize: '3em'}, 5000);

  });

  $("#stop").click(function(){

     $("div").stop(true, true);

  });

});

Khi chúng ta nhấn nút Start sẽ thực hiện hiệu ứng di chuyển phần tử div sang trái 100px – phương thức animate thứ nhất và sau đó tăng kích cỡ chữ (HELLO) lên 3em – phương thức animate thứ hai. Giả sử phần tử div đang di chuyển sang trái, khi nhấn nút Stop sẽ thực hiện phương thức Stop() để hoàn thành phương thức animate thứ  nhất ngay lập tức và không chuyển sang phương thức animate thứ hai.

Dây chuyền phương thức (method chaining)

Giả sử chúng ta có đoạn mã jQuery sau:


$(document).ready(function(){

  $("#start").click(function(){

    $("div").animate({left: '100px'}, 5000);

    $("div").animate({fontSize: '3em'}, 5000);

  });

});

Phần tử div có hai phương thức animate chứa trong hàng đợi. Chúng ta có thể viết lại đoạn mã trên sử dụng kĩ thuật dây chuyền  như sau:


$(document).ready(function(){

  $("#start").click(function(){

    $("div").animate({left: '100px'}, 5000)
                   
             .animate({fontSize: '3em'}, 5000);

  });

});

Sử dụng kĩ thuât dây chuyền có thể làm dòng mã trở nên rất dài, jQuery cho phép chúng ta ngắt các phương thức thành nhiều hàng. Đoạn mã trên có thể viết lại:


$(document).ready(function(){

  $("#start").click(function(){

    $("div").animate({left: '100px'}, 5000)

            .animate({fontSize: '3em'}, 5000);

  });

});

Lưu ý rằng, không có kí hiệu ngăn cách giữa các phương thức animate và trước các phương thức có dấu chấm.

Cú pháp tổng quát có thể trông như sau:


$(selector).method1.method2.method3…methodn;

Hay


$(selector).method1

.method2

…

.methodn;

< Học jQuery