Cách hiện và ẩn một phần tử (với hiệu ứng phai màu) – 05
Ở bài hướng dẫn này, bạn sẽ được tìm hiểu cách hiện và ẩn một phần tử HTML với hiệu ứng phai màu
Với hiệu ứng phai màu, chúng ta có bốn phương thức:
- fadeIn() – hiện phần tử với hiệu ứng phai màu.
- fadeOut() – ẩn phần tử với hiệu ứng phai màu.
- fadeToggle() – thực hiện luân phiên giữa việc hiện và ẩn phần tử với hiệu ứng phai màu.
- fadeTo() – thiết lập hiệu ứng phai màu cho phần tử.
Phương thức fadeIn() và phương thức fadeOut()
Phương thức fadeIn() dùng để hiện một phần tử HTML với hiệu ứng phai màu.
Phương thức fadeOut() dùng để ẩn một phần tử HTML với hiệu ứng phai màu.
Cú pháp:
- $(selector).fadeIn(time, callback);
- $(selector).fadeOut(time, callback);
Trong đó:
- Tham số time là khoảng thời gian của việc thực thi hiện/ẩn phần tử. Giá trị của tham số time có thể là:
- “slow” khoảng thời gian tương đối dài.
- “fast” khoảng thời gian tương đối ngắn.
- milliseconds (Ví dụ: 3000, 9000). Lưu ý: 1000 milliseconds = 1 giây
- Tham số callback là một hàm sẽ được thực thi sau khi việc hiện/ẩn phần tử đã được hoàn thành.
Ví dụ 1:
HIỆN/ẨN phần tử với hiệu ứng phai màu (không sử dụng tham số)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$("input[value='hien']").click(function(){
$("#abc").fadeIn();
})
$("input[value='an']").click(function(){
$("#abc").fadeOut();
})
})
</script>
</head>
<body>
<p><input type="radio" name="radio" value="hien" checked> Hiện</p>
<p><input type="radio" name="radio" value="an"> Ẩn</p>
<div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>Ví dụ 2:
HIỆN/ẨN phần tử với hiệu ứng phai màu (chỉ sử dụng tham số time)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$("input[value='hien']").click(function(){
$("#abc").fadeIn(2000);
})
$("input[value='an']").click(function(){
$("#abc").fadeOut(2000);
})
})
</script>
</head>
<body>
<p><input type="radio" name="radio" value="hien" checked> Hiện</p>
<p><input type="radio" name="radio" value="an"> Ẩn</p>
<div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>Ví dụ 3:
<div class="i-more">
HIỆN/ẨN phần tử với hiệu ứng phai màu (chỉ sử dụng tham số callback)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$("input[value='hien']").click(function(){
$("#abc").fadeIn(function(){alert("HIỆN");});
})
$("input[value='an']").click(function(){
$("#abc").fadeOut(function(){alert("ẨN");});
})
})
</script>
</head>
<body>
<p><input type="radio" name="radio" value="hien" checked> Hiện</p>
<p><input type="radio" name="radio" value="an"> Ẩn</p>
<div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>Ví dụ 4:
HIỆN/ẨN phần tử với hiệu ứng phai màu (sử dụng tham số time và callback)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$("input[value='hien']").click(function(){
$("#abc").fadeIn("slow", function(){alert("HIỆN");});
})
$("input[value='an']").click(function(){
$("#abc").fadeOut("slow", function(){alert("ẨN");});
})
})
</script>
</head>
<body>
<p><input type="radio" name="radio" value="hien" checked> Hiện</p>
<p><input type="radio" name="radio" value="an"> Ẩn</p>
<div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>Phương thức fadeToggle()
Phương thức fadeToggle() dùng để thực hiện luân phiên giữa việc hiện và ẩn phần tử HTML với hiệu ứng phai màu.
Ví dụ:
- Khi phần tử đang bị ẩn, phương thức fadeToggle() sẽ hiện phần tử lên.
- Khi phần tử đang hiện, phương thức fadeToggle() sẽ ẩn phần tử đi.
Cú pháp: $(selector).fadeToggle(time, callback);
Cách sử dụng tham số “time” và “callback” giống như trong phương thức fadeIn() và fadeOut()
Ví dụ 1:
Không sử dụng tham số
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#abc").fadeToggle();
})
})
</script>
</head>
<body>
<p><button> Click here</button></p>
<div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>Ví dụ 2:
Chỉ sử dụng tham số time
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#abc").fadeToggle(2000);
})
})
</script>
</head>
<body>
<p><button> Click here</button></p>
<div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>Ví dụ 3:
Chỉ sử dụng tham số callback
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#abc").fadeToggle(function(){alert("XONG");});
})
})
</script>
</head>
<body>
<p><button> Click here</button></p>
<div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>Ví dụ 4:
Sử dụng tham số time và callback
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#abc").fadeToggle("slow", function(){alert("XONG");});
})
})
</script>
</head>
<body>
<p><button> Click here</button></p>
<div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>Phương thức fadeTo()
Phương thức fadeTo() dùng để tạo hiệu ứng phai màu (mờ nhạt dần) cho một phần tử HTML
Cú pháp: $(selector).fadeTo(time, opacity, callback);
Trong đó:
- Tham số time là khoảng thời gian của hiệu ứng phai màu (giá trị có thể là: “slow”, “fast”, miliseconds).
- Tham số opacity là mức độ phai màu của phần tử (giá trị có thể nằm trong khoảng từ 0.0 đến 1.0).
- Tham số callback là một hàm sẽ được thực thi sau khi hiệu ứng phai màu được thực thi xong.
Lưu ý: Phương thức fadeTo() cần phải có ít nhất hai tham số time & opacity thì mới có thể hoạt động được.
Ví dụ 1:
Tạo hiệu ứng phai màu cho phần tử (chỉ sử dụng hai tham số)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$("input[value='radio1']").click(function(){
$(".div1").fadeTo(1500, 0.6);
$(".div2").fadeTo(2500, 0.3);
$(".div3").fadeTo(3500, 0.1);
})
$("input[value='radio2']").click(function(){
$(".div1").fadeTo(1500, 1.0);
$(".div2").fadeTo(2500, 1.0);
$(".div3").fadeTo(3500, 1.0);
})
})
</script>
</head>
<body>
<p><input type="radio" name="radio" value="radio1"> Phai màu</p>
<p><input type="radio" name="radio" value="radio2" checked> Nổi lên</p>
<div style="background-color:brown;height:100px;" class="div1"></div>
<div style="background-color:yellow;height:100px;" class="div2"></div>
<div style="background-color:gray;height:100px;" class="div3"></div>
</body>
</html>Ví dụ 2:
Tạo hiệu ứng phai màu cho phần tử (sử dụng cả ba tham số)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$("input[value='radio1']").click(function(){
$("div").fadeTo(2000, 0.2, function(){alert("PHAI MÀU");});
})
$("input[value='radio2']").click(function(){
$("div").fadeTo(2000, 1.0, function(){alert("NỔI LÊN");});
})
})
</script>
</head>
<body>
<p><input type="radio" name="radio" value="radio1"> Phai màu</p>
<p><input type="radio" name="radio" value="radio2" checked> Nổi lên</p>
<div style="background-color:brown;height:100px;"></div>
</body>
</html>Lưu ý: Phương thức fadeTo() chỉ làm cho phần tử bị phai màu, nó không làm phần tử bị ẩn đi.
