.fadeOut()
Định nghĩa và sử dụng .fadeOut()ẩn các thành phần phù hợp với hiệu ứng mờ dần (fade). .fadeOut() được ứng dụng trong menu, khi hover sẽ xuất hiện menu con, mouseout sẽ ẩn menu con. .fadeOut(độ bền) Cấu trúc Độ bền có thể bằng số hoặc bằng chữ: slow, fast. $(‘p’).fadeOut(300); $(‘p’).fadeOut(‘fast’); Html viết: <!DOCTYPE HTML> […]
Định nghĩa và sử dụng
.fadeOut()ẩn các thành phần phù hợp với hiệu ứng mờ dần (fade)..fadeOut()được ứng dụng trong menu, khi hover sẽ xuất hiện menu con, mouseout sẽ ẩn menu con.
.fadeOut(độ bền)
Cấu trúc
Độ bền có thể bằng số hoặc bằng chữ: slow, fast.
$('p').fadeOut(300);
$('p').fadeOut('fast');
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
background-color: blue;
float: left;
margin-right: 20px;
height: 100px;
width: 100px;
}
p {
clear: both;
}
</style>
<script>
$(function(){
$('button').click(function(){
$('.test03').fadeOut(2000);
$('.test02').fadeOut('slow');
$('.test01').fadeOut();
});
});
</script>
</head>
<body>
<p><button>Click</button></p>
<div class="test03">fadeOut(2000)</div>
<div class="test02">fadeOut('slow')</div>
<div class="test01">fadeOut()</div>
</body>
</html>
Hiển thị trình duyệt:
fadeOut(2000)fadeOut(‘slow’)fadeOut()
Click vào button để thấy hiệu ứng.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
| <p><button>Click</button></p> <div class=”test03″>fadeOut(2000)</div> <div class=”test02″>fadeOut(‘slow’)</div> <div class=”test01″>fadeOut()</div> |
<p><button>Click</button></p> <div class=”test03″ style=”display: block;”>fadeOut(2000)</div> <div class=”test02″ style=”display: block;”>fadeOut(‘slow’)</div> <div class=”test01″ style=”display: block;”>fadeOut()</div> |
.fadeOut(Độ bền,function(){…})
Cấu trúc
Độ bền có thể bằng số hoặc bằng chữ: slow, fast.
$('p').fadeOut(300,function(){
$('span').fadeOut(100);
});
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
background-color: blue;
float: left;
margin-right: 20px;
height: 100px;
width: 100px;
}
p {
clear: both;
}
</style>
<script>
$(function(){
$('button').click(function(){
$('div').fadeOut(2000,function(){
$(this).css('background-color','red');
});
});
});
</script>
</head>
<body>
<p><button>Click</button></p>
<div>Thành phần div</div>
</body>
</html>
Hiển thị trình duyệt:
Thành phần div
Click vào button để thấy hiệu ứng, sau khi hoàn thành hiệu ứng sẽ hiển thị nội dung bên trong function.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
| <p><button>Click</button></p> <div>Thành phần div</div> |
<p><button>Click</button></p> <div style=”display: block; background-color: red;”>Thành phần div</div> |
