Love beautiful code? We do too.
Định nghĩa và sử dụng .fadeOut() trong jQuery
.fadeOut(): Ẩn các thành phần phù hợp với hiệu ứng mờ dần (fade).
Cấu trúc .fadeOut() trong jQuery
Đã được thêm vào từ phiên bản 1.0
.fadeOut(Độ bền)
Độ bền có thể bằng số hoặc bằng chữ: slow, fast.
$('p').fadeOut(300);
$('p').fadeOut('fast');.fadeOut(Độ bền,function(){...})
Độ bền có thể bằng số hoặc bằng chữ: slow, fast.
$('p').fadeOut(300,function(){
$('span').fadeOut(100);
});Đã được thêm vào từ phiên bản 1.4.3
.fadeOut(Độ bền,'easing',function(){...})
Độ bền có thể bằng số hoặc bằng chữ: slow, fast.
Easing có thể sử dụng swing hoặc linear
$('p').fadeOut(300,'swing',function(){
$('span').fadeOut(100);
});.fadeOut(Độ bền)
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://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:
Click vào button để thấy hiệu ứng.
.fadeOut(Độ bền,function(){...})
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://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:
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.
.fadeOut(Độ bền,'easing',function(){...})
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
div {
background-color: blue;
float: left;
margin-right: 20px;
height: 100px;
width: 100px;
}
p {
clear: both;
}
.visible {
background-color: red;
display: block!important;
}
</style>
<script>
$(function(){
$('button').click(function(){
$('.swing').fadeOut(2000,'swing',function(){
$(this).addClass('visible').text('Nội dung mới');
});
$('.linear').fadeOut(2000,'linear',function(){
$(this).addClass('visible').text('Nội dung mới');
});
});
});
</script>
</head>
<body>
<p><button>Click</button></p>
<div class="swing">fadeOut swing</div>
<div class="linear">fadeOut linear</div>
</body>
</html>Hiển thị trình duyệt:
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.
Unpublished comment
Viết câu trả lời