Bài 1: Giới thiệu về Trình quản lý quảng cáo

BÀI GIẢNG: jQuery Effects - Tạo hiệu ứng động với jQuery

1. Giới thiệu về jQuery Effects

jQuery cung cấp nhiều phương thức tạo hiệu ứng giúp làm cho trang web sinh động và hấp dẫn hơn mà không cần viết nhiều mã JavaScript phức tạp.

Lợi ích của jQuery Effects:

✔️ Dễ sử dụng với cú pháp đơn giản.
✔️ Tương thích tốt với nhiều trình duyệt.
✔️ Giúp cải thiện trải nghiệm người dùng.

jQuery hỗ trợ nhiều hiệu ứng như ẩn/hiện, mờ dần, trượt, hoạt họa và dừng hiệu ứng.

2. Các nhóm hiệu ứng trong jQuery

2.1. Hiệu ứng Ẩn/Hiện (Hide/Show/Toggle)

📌 Phương thức:

.hide(speed, callback)   // Ẩn phần tử
.show(speed, callback)   // Hiện phần tử
.toggle(speed, callback) // Ẩn/hiện phần tử

📌 Ví dụ:

<button id="btnToggle">Ẩn/Hiện</button>
<div id="box" style="width:100px; height:100px; background:red;"></div>

<script>
    $("#btnToggle").click(function(){
        $("#box").toggle(500);
    });
</script>

📌 Giải thích:

Khi nhấn nút, #box sẽ ẩn hoặc hiện trong 500ms.

2.2. Hiệu ứng Làm mờ dần (Fade Effects)

📌 Phương thức:

.fadeIn(speed, callback)      // Làm mờ xuất hiện
.fadeOut(speed, callback)     // Làm mờ biến mất
.fadeToggle(speed, callback)  // Làm mờ ẩn/hiện
.fadeTo(speed, opacity, callback)  // Làm mờ đến độ trong suốt nhất định

📌 Ví dụ:

<button id="btnFade">Mờ dần</button>
<div id="fadeBox" style="width:100px; height:100px; background:blue;"></div>

<script>
    $("#btnFade").click(function(){
        $("#fadeBox").fadeToggle(1000);
    });
</script>

📌 Giải thích:

fadeToggle(1000) làm #fadeBox mờ dần biến mất hoặc xuất hiện trong 1 giây.

2.3. Hiệu ứng Trượt (Slide Effects)

📌 Phương thức:

.slideDown(speed, callback)  // Trượt xuống để hiện phần tử
.slideUp(speed, callback)    // Trượt lên để ẩn phần tử
.slideToggle(speed, callback) // Trượt lên/xuống để ẩn/hiện phần tử

📌 Ví dụ:

<button id="btnSlide">Trượt</button>
<div id="slideBox" style="width:100px; height:100px; background:green; display:none;"></div>

<script>
    $("#btnSlide").click(function(){
        $("#slideBox").slideToggle(700);
    });
</script>

📌 Giải thích:

slideToggle(700) làm #slideBox trượt lên hoặc xuống trong 700ms.

2.4. Hiệu ứng Hoạt họa (Animate)

📌 Phương thức:

.animate({css_properties}, speed, callback)

📌 Ví dụ:

<button id="btnMove">Di chuyển</button>
<div id="moveBox" style="width:50px; height:50px; background:purple; position:absolute;"></div>

<script>
    $("#btnMove").click(function(){
        $("#moveBox").animate({left: '250px', opacity: '0.5'}, 1000);
    });
</script>

📌 Giải thích:

#moveBox sẽ di chuyển sang phải 250px và giảm độ mờ xuống 0.5 trong 1 giây.

2.5. Dừng hiệu ứng (Stop Effects)

📌 Phương thức:

.stop(clearQueue, jumpToEnd)

📌 Ví dụ:

<button id="btnStart">Bắt đầu</button>
<button id="btnStop">Dừng</button>
<div id="stopBox" style="width:100px; height:100px; background:orange; position:absolute;"></div>

<script>
    $("#btnStart").click(function(){
        $("#stopBox").animate({left: '400px'}, 3000);
    });

    $("#btnStop").click(function(){
        $("#stopBox").stop();
    });
</script>

📌 Giải thích:

Khi bấm Bắt đầu, #stopBox sẽ di chuyển sang phải trong 3 giây.
Khi bấm Dừng, hiệu ứng sẽ ngừng ngay lập tức.

2.6. Hiệu ứng Delay (Trì hoãn hiệu ứng)

📌 Phương thức:

.delay(time)

📌 Ví dụ:

<button id="btnDelay">Hiệu ứng trễ</button>
<div id="delayBox" style="width:100px; height:100px; background:pink;"></div>

<script>
    $("#btnDelay").click(function(){
        $("#delayBox").fadeOut(1000).delay(2000).fadeIn(1000);
    });
</script>

📌 Giải thích:

fadeOut(1000) sẽ làm #delayBox mờ dần mất trong 1 giây.
Sau 2 giây trì hoãn, fadeIn(1000) sẽ làm phần tử xuất hiện trở lại.

2.7. Hiệu ứng Xếp chồng (Queueing Effects)

📌 Ví dụ:

<button id="btnQueue">Xếp chồng hiệu ứng</button>
<div id="queueBox" style="width:100px; height:100px; background:yellow;"></div>

<script>
    $("#btnQueue").click(function(){
        $("#queueBox")
            .animate({width: "200px"}, 1000)
            .animate({height: "200px"}, 1000)
            .animate({opacity: "0.5"}, 1000)
            .animate({left: "200px"}, 1000);
    });
</script>

📌 Giải thích:

Các hiệu ứng sẽ thực hiện tuần tự thay vì đồng thời.

3. Tổng kết

✅ hide(), show(), toggle() → Ẩn/hiện phần tử.
✅ fadeIn(), fadeOut(), fadeToggle(), fadeTo() → Làm mờ phần tử.
✅ slideDown(), slideUp(), slideToggle() → Trượt phần tử.
✅ animate() → Tạo hiệu ứng tùy chỉnh.
✅ stop() → Dừng hiệu ứng đang chạy.
✅ delay() → Trì hoãn hiệu ứng.
✅ queue() → Thực hiện hiệu ứng theo thứ tự.

💡 Ứng dụng thực tế:

Hiệu ứng hiển thị menu bằng slideDown().
Làm nổi bật thông báo bằng fadeIn().
Tạo hiệu ứng chuyển động với animate().

Checklist các mục cần chuẩn bị PDF · 1.2MB

Tải xuống
Tài nguyên chính thức của Facebook Link ngoài

Mở link

BÀI TẬP: Luyện tập jQuery Effects

Yêu cầu

Hãy tạo một trang web có hiệu ứng động sử dụng jQuery, bao gồm các chức năng sau:

Ẩn/Hiện Nội Dung
- Tạo một nút "Ẩn/Hiện", khi nhấn vào sẽ ẩn hoặc hiển thị một đoạn văn bản sử dụng .toggle().
Hiệu ứng Làm mờ dần (Fade Effect)
- Tạo một nút "Mờ dần", khi nhấn vào sẽ làm mờ dần một hình ảnh sử dụng .fadeToggle().
Hiệu ứng Trượt (Slide Effect)
- Tạo một nút "Trượt Xuống/Lên", khi nhấn vào sẽ trượt xuống hoặc trượt lên một khối div sử dụng .slideToggle().
Hoạt họa với .animate()
- Khi nhấn vào một nút "Di chuyển", một hình vuông sẽ di chuyển sang phải 200px và tăng kích thước lên 150x150px trong 1 giây.
Dừng hiệu ứng
- Khi hiệu ứng hoạt họa đang chạy, nhấn vào nút "Dừng" để ngăn chặn hoạt họa đang diễn ra.

Mẫu HTML

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bài tập jQuery Effects</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
        #content {
            display: none;
        }
    </style>
</head>
<body>

    <button id="btnToggle">Ẩn/Hiện</button>
    <p id="content">Đây là đoạn văn cần ẩn/hiện.</p>

    <button id="btnFade">Mờ dần</button>
    <img id="image" src="https://via.placeholder.com/150" alt="Ảnh mẫu">

    <button id="btnSlide">Trượt Xuống/Lên</button>
    <div id="slideBox" style="width: 100px; height: 100px; background: blue;"></div>

    <button id="btnAnimate">Di chuyển</button>
    <button id="btnStop">Dừng</button>
    <div id="box"></div>

    <script>
        //Viết mã js vào đây
    </script> 
</body>
</html>

Bài 1: Giới thiệu về Trình quản lý quảng cáo

BÀI GIẢNG: jQuery Effects - Tạo hiệu ứng động với jQuery

1. Giới thiệu về jQuery Effects

Lợi ích của jQuery Effects:

2. Các nhóm hiệu ứng trong jQuery

2.1. Hiệu ứng Ẩn/Hiện (Hide/Show/Toggle)

2.2. Hiệu ứng Làm mờ dần (Fade Effects)

2.3. Hiệu ứng Trượt (Slide Effects)

2.4. Hiệu ứng Hoạt họa (Animate)

2.5. Dừng hiệu ứng (Stop Effects)

2.6. Hiệu ứng Delay (Trì hoãn hiệu ứng)

2.7. Hiệu ứng Xếp chồng (Queueing Effects)

3. Tổng kết

BÀI TẬP: Luyện tập jQuery Effects

Yêu cầu

Mẫu HTML

Yêu cầu nộp bài: File html + js hoặc biên soạn trực tiếp