Jquery cơ bản-Hiệu ứng

Qua vài bài về Jquery cơ bản vừa rồi chắc các bạn đã hiểu được phần nào về Jquery. Hôm nay mình xin tiếp tục với một số hiệu ứng cơ bản trong Jquery. Bài viết hôm nay sẽ hơi dài một chút mong các bạn thông cảm. Trước tiên chúng ta hãy xem hiệu ứng trong Jquery là gì? Hiệu ứng được hiểu một cách đơn giản là việc tạo ra các chuyển động cho phần tử HTML với những trạng thái và cách thức khác nhau( hơi khó hiểu chút@@).  Những hiệu ứng này sẽ giúp web của bạn trở nên sinh động hơn. Trong Jquery có những hiệu ứng cơ bản sau: Show, Hide, Slide, Toogle, Fade, Animate. Chắc các bạn vẫn còn nhớ ở bài giới thiêu về cú pháp trong Jquery mình cũng có 1 ví dụ về Show và Hide. Hôm nay chúng ta sẽ tìm hiểu kĩ hơn 1 chút về 2 phương thức này và những phương thức khác.

1. Phương thức Show() trong Jquery.

Show() là phương thức giúp bạn hiện ra một phần tử HTML nào đó đã bị ẩn đi.

Cú pháp: $(selector).show(speed, callback);

Selector ở đây là phần tử bạn muốn hiển thị.

Speed: ở đây là tốc độ hiển thị phần tử. Bạn có thể dùng slow, normal, fast hoặc thời gian tính bằng mili giây.

Callback: đây là hàm mà chúng ta sẽ thực thi khi show được thực hiện.

2. Phương thức Hide() trong Jquery.

Phương thức Hide giống với Show nhưng mà là làm ngược lại. Show là hiển thị ra còn Hide là làm ẩn đi.

Cú pháp: $(selector).hide(speed,callback);

Selector: phần tử bạn muốn ẩn đi.

Speed: tốc độ ẩn có thể là slow,normal,fast hoặc thời gian tính bằng mili giây.

Callback: hàm được thực thi khi hide được gọi .

3. Phương thức Toogle

Phương thức này là sự kết hợp của Show và Hide. Nếu phần tử đang ẩn thì nó sẽ làm phần tử hiện và phần tử đang hiện sẽ bị ẩn đi nếu dùng nó.

Cú pháp: $(selector).toogle(speed,callback);

 Selector: phần tử sử dụng toogle.

Speed: tốc độ sử dụng toogle có thể dùng slow, normal, fast, hoặc thời gian tính bằng giây.

4. Các phương thức Slide.

a. SlideUp: thu phần tử nhỏ lại cho đến khi không nhìn thấy.

Cú pháp: $(selector).slideUp(speed,callback); 

b. SlideDown: đưa phần tử trở lại kích thước ban đầu.

Cú pháp: $(selector).slideDown(speed,callback); 

c.SlideToogle: đưa phần tử về kích thước ngược lại với kích thước hiện tại. Đây là hàm kết hợp giữa SlideUp và SlideDown. Ví dụ nếu bạn đưa phần tử về kích thước về 0:0 bằng SlideUp thì dùng SlideToogle thì phần tử sẽ trở lại với kích thước ban đầu giống với khi dùng SlideDown.

Cú pháp: $(selector).slideToogle(speed,callback);

Các tham số giống như các phương thức mình không giải thích thêm.

 5. Các phương thức Fade

Các phương thức fade là các phương thức ảnh hưởng đến độ sáng,đậm của phần tử.

a.FadeOut(): làm mờ phần tử được chọn cho đến khi opacity=0.

Cú pháp: $(selector).fadeOut(speed,callback);

 b.FadeIn(): làm đậm phần tử sau khi nó được làm mờ và đưa opacity=1.

Cú pháp: $(selector).fadeIn(speed,callback);

 c. FadeTo là sự kết hợp của 2 phương thức trên.

Cú pháp: $(selector).fadeTo(speed,opacity,callback);

FadeTo cho phép bạn làm mờ hoặc làm đậm phần tử với opacity được chỉ định. Các bạn lưu ý opacity nằm trong khoảng từ 0-1.

6.Phương thức Animate

Đây là phương thức phức tạp nhất trong các phương thức về hiệu ứng trong Jquery. Có lẽ mình sẽ có một bài chi tiết về phương thức này. Bài này mình chỉ giới thiệu sơ qua thôi. Animate là phương thức tạo ra các chuyển động về hình dạng, kích thước, vị trí, ... cho phần tử.

Cú pháp: $(selector).animate({params},[duration],[easing],[callback])

Param: là các tham số chứa thuộc tính và giá trị css cho phần tử.

Duration: thời gian xảy ra animate tính bằng mili giây.

Easing: định nghĩa cách dịch chuyển của phần tử như swing,linear,...

Callback: hàm được thực thi khi animate được gọi.

Bây giờ để hiểu rõ hơn về những gì ở trên chúng ta sẽ làm 1 ví dụ. Giả sử chúng ta có một body gồm 6 button và 1 bức ảnh. Mỗi button tương ứng với 1 phương thức effect:

<button id="btnHide">Hide</button>

    <button id="btnShow">Show</button>

    <button id="btnFade">Fade</button>

    <button id="btnToogle">Toogle</button>

    <button id="btnSlide">Slide</button>

    <button id="btnAnimate">Animate</button><br />

    <img id="imgFairyTail" src="https://lh5.googleusercontent.com/-qzJWFkzndOA/UDDA29wNdQI/AAAAAAAAA2k/bT33xrebZbY/ s512/hieu%2520ung%2520trong%2520jquery.jpg" alt="hieu ung trong jquery" />

Tiếp theo chúng ta sẽ code cho phần jQuery như sau:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            //event for button Animate.

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

                $("#imgFairyTail").animate({ width: 171, height: 128 }, "slow");

                $("#imgFairyTail").animate({ width: 512 }, "slow");

                $("#imgFairyTail").animate({ height: 384 }, 3000);

            });

            // event for button Fade.

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

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

                $("#imgFairyTail").fadeIn("slow");

                $("#imgFairyTail").fadeTo(3000, 0.2);

                $("#imgFairyTail").fadeTo(3000, 1);

            });

            // event for button Toogle

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

                $("#imgFairyTail").toggle(3000);

            });

            // event for button Slide

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

                $("#imgFairyTail").slideUp(3000);

                $("#imgFairyTail").slideDown(3000);              

                $("#imgFairyTail").slideToggle(3000);

                $("#imgFairyTail").slideToggle(3000);

            });

            // event for button Show and Hide

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

                $("#imgFairyTail").show("slow");

            });

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

                $("#imgFairyTail").hide("slow");

            });

        });

    </script>

 Phân tích đoạn code trên một chút:

Animate: Mình sẽ thu ảnh nhỏ lại chỉ bằng 1/3 ảnh bình thường sau đó mình lại phóng to nó về kích thước ban đầu. Có 2 cách để truyền tham số thuộc tính css bạn có thể thấy trong phương thức mình đã viết.

Fade: Mình sẽ làm mờ ảnh đi bằng fadeOut sau đó làm nó hiện trở lại với fadeIn. Tiếp theo mình dùng fadeToogle để làm mở ảnh đi khi tới opacity=0.2(do ảnh đang ở trạng thái ban đầu opacity=1). Sau đó mình lại dùng fadeToogle để làm hiện nó trở lại với opacity=1.

Slide: Đầu tiên mình dùng slideUp để thu ảnh nhỏ lại sau đó dùng slideDown để đưa ảnh về kích thước bạn đầu. Tiếp tục mình dung slideToogle để thu ảnh lại(do ảnh đang ở trạng thái full kích thước ban đầu) rồi sau đó lại dùng slideToogle để đưa nó về trạng thái full kích thước.

Show,Hide,Toogle thì đơn giản rùi chỉ là ẩn, hiện, hoặc đang hiện thì ẩn còn đang ẩn thì hiện thôi.

Và đây là kết quả :

Thực ra trong jquery có rất nhiều hiệu ứng đẹp nhưng để làm được chúng thì phải mất chút ít thời gian và cần có kiến thức tốt về jquery. Tới đây mình cũng xin dừng lại! Mệt quá @@