Jquery Cơ bản

[Bài 4] Hiệu ứng trong jquery

5/5 - (1 bình chọn)

Ở bài trước chúng ta đã tìm hiểu về sự kiện trong jquery. Ở bài này mình sẽ giới thiệu đến các bạn về hiệu ứng trong jquery. Thông thường các bạn sẽ kết hợp hiệu ứng với các sự kiện trong jquery để tạo nên những hiệu ứng đẹp cho web. Các hiệu ứng thường gặp trong jquery như sau:

Hiệu ứng ẩn hide() và hiện show()

Hiệu ứng trong jquery

Hiệu ứng trong jquery

Trong jquery chúng ta có thể ẩn hiện các thành phần HTML với phương thức hide() và show().

Ví dụ:

1
2
3
4
5
6
7
8
9
10
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>

Khi nhấn nút có id = hide thì chúng ta ẩn đi thẻ p. Khi nhấn nút có id = show thì ta hiển thị lại thẻ p. Ở đây, chúng ta có sử dụng sự kiện click. Demo

Tùy chỉnh:

$(selector).show(speed,callback);

Có 2 thông số để tùy chỉnh là speed và callback trong việc sử dụng hiệu ứng jquery. Speed là tốc độ của hiệu ứng thường có giá trị là: slow, fast hoặc thông số mili giây (1000 = 1 giây). Callback là hàm sẽ thực thi sau khi hiệu ứng đã hoàn thành.

Hiệu ứng toggle()

Sẽ chuyển đổi trạng thái ẩn, hiện của đối tượng qua lại khi có sự thay đổi.

Ví dụ:

1
2
3
4
5
6
7
<script>
$(document).ready(function(){</pre>
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>

Khấn nút button thì thẻ p sẽ bị ẩn, khi nhấn lần nữa thì thẻ p sẽ hiển thị trở lại. Demo

Hiệu ứng fadeIn(), fadeOut(), fadeToggle(), fadeTo()

Các hiệu ứng này sẽ tạo hiệu ứng xuất hiện của các thành phần được gắn hiệu ứng.

Ví dụ:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
$(document).ready(function(){
  $("#button1").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(2000);
  });
  $("#button2").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(2000);
  });
  $("#button3").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(2000);
  });
  $("#button4").click(function(){
    $("#div1").fadeTo("slow", 0.1);
    $("#div2").fadeTo("slow", 0.5);
    $("#div3").fadeTo("slow", 0.8);
  });
});
</script>

Nhấn mỗi button thì chúng ta sẽ thấy những hiệu ứng xuất hiện tương ứng. Demo

Hiệu ứng slideDown(), slideUp(), slideToggle()

Các hiệu ứng trượt này sẽ giúp chuyển động trở nên mượt mà hơn

Ví dụ:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
$(document).ready(function(){
  $("#button1").click(function(){
    $("#div1"). slideDown ();
    $("#div2"). slideDown("slow");
    $("#div3"). slideDown (2000);
  });
  $("#button2").click(function(){
    $("#div1"). slideUp();
    $("#div2"). slideUp("slow");
    $("#div3"). slideUp(2000);
  });
  $("#button3").click(function(){
    $("#div1"). slideToggle ();
    $("#div2"). slideToggle ("slow");
    $("#div3"). slideToggle (2000);
  });
});
</script>

Nhấn mỗi button thì chúng ta sẽ thấy các hiệu ứng trượt tương ứng. Demo

Hiệu ứng chuyển động animation()

Sẽ giúp tạo ra các chuyển động mong muốn.

Cú pháp:

$(selector).animate({params},speed,callback);

Ví dụ:

1
2
3
4
5
6
7
8
9
10
11
12
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left: '250px',
      opacity: '0.5',
      height: '150px',
      width: '150px'
    });
  });
});
</script>

Khi nhấn vào nút button thì thẻ div của chúng ta sẽ di chuyển sang phải, mờ đi và thay đổi kích thước. Demo

Sử dụng phương thức stop()

Dùng để ngưng một chuyển động hay hiệu ứng trước khi chúng hoàn tất.

Cú pháp:

$(selector).stop(stopAll,goToEnd);

Ví dụ:

1
2
3
4
5
6
7
8
9
10
11
<script>
$(document).ready(function(){
  $("#slide").click(function(){
    $("#demo").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#demo").stop();
  });
});
</script>

Nhấn nút ngừng thì hiệu ứng slide down sẽ ngừng lại. Demo

Sử dụng phương thức callback

Thực thi một hành động sau khi hiệu ứng kết thúc

1
2
3
4
5
6
7
8
9
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide("slow", function(){
      alert("Đoạn văn đã bị ẩn");
    });
  });
});
</script>

Hiện thông báo đoạn văn đã bị ẩn sau khi kết thúc hiệu ứng hide(). Demo

Kết hợp nhiều hiệu ứng

Trong jquery bạn có thể kết hợp nhiều hiệu ứng với nhau một cách dễ dàng.

Ví dụ:

1
2
3
4
5
6
7
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("color", "red").slideUp(3000).slideDown(3000);
  });
});
</script>

Khi nấn nút thì đoạn văn sẽ chuyển màu và trược lên trong 3 giây và trược xuống trong 3 giây. Demo

Kết luận:

Như vậy, trong bài này thì chúng ta đã làm quen được với những hiệu ứng trong jquery thường gặp và cách sử dụng chúng. Trong bài tới chúng ta sẽ tìm hiểu về xử lý HTML và CSS trong jquery.

Related Posts

Add Comment