.fadeToggle() | Hàm jQuery | Tham khảo jQuery

Định nghĩa và sử dụng

.fadeToggle(): Làm hiển thị (display: block;) hoặc biến mất (display: none;) thành phần kèm với hiệu ứng làm mờ (opacity).

Cấu trúc

Đã được thêm vào từ phiên bản 1.4.4

Độ bền có thể bằng số hoặc bằng chữ: slow, fast.

$('p').fadeToggle(400);

$('p').fadeToggle('fast');

.fadeToggle(Độ bền,'easing')

Độ 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').fadeToggle(400,'swing');

$('p').fadeToggle('fast','linear');

.fadeToggle(Độ bền,function(){...})

Độ bền có thể bằng số hoặc bằng chữ: slow, fast.

$('p').fadeToggle(300,function(){
    $(this).css('background-color','red');
});

.fadeToggle(Độ 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').fadeToggle(300,'swing',function(){
    $(this).css('background-color','red');
});

.fadeToggle(Độ bền)

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: 150px;
}
p {
    clear: both;
}
</style>
<script>
$(function(){
    $('button').click(function() {
        $('.test01').fadeToggle(800);
        $('.test02').fadeToggle('fast');
    });
});
</script>
</head>

<body>
<p><button>Toggle</button></p>
<div class="test01">Fade Toggle 800</div>
<div class="test02">Fade Toggle fast</div>
</body>
</html>

Hiển thị trình duyệt:

Hiệu ứng sẽ luân phiên hiển thì và ẩn thông qua nhiều lần click vào button.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<p><button>Toggle</button></p> <div class="test01">Fade Toggle 800</div> <div class="test02">Fade Toggle fast</div>	<p><button>Toggle</button></p> <div class="test01" style="display: none;">Fade Toggle 800</div> <div class="test02" style="display: none;">Fade Toggle fast</div>

.fadeToggle(Độ bền,'easing')

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: 150px;
}
p {
    clear: both;
}
</style>
<script>
$(function(){
    $('button').click(function() {
        $('.test01').fadeToggle(1400,'swing');
        $('.test02').fadeToggle(1400,'linear');
    });
});
</script>
</head>

<body>
<p><button>Toggle</button></p>
<div class="test01">Fade Toggle 1400 swing</div>
<div class="test02">Fade Toggle 1400 linear</div>
</body>
</html>

Hiển thị trình duyệt:

Hiệu ứng sẽ luân phiên hiển thì và ẩn thông qua nhiều lần click vào button.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<p><button>Toggle</button></p> <div class="test01">Fade Toggle 1400 swing</div> <div class="test02">Fade Toggle 1400 linear</div>	<p><button>Toggle</button></p> <div class="test01" style="display: none;">Fade Toggle 1400 swing</div> <div class="test02" style="display: none;">Fade Toggle 1400 linear</div>

.fadeToggle(Độ bền,function(){...})

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;
    display: none;
    float: left;
    margin-right: 20px;
    height: 100px;
    width: 100px;
}
p {
    clear: both;
}
</style>
<script>
$(function(){
    $('button').click(function(){
        $('div').fadeToggle(2000,function(){
            $(this).css('color','yellow').text('Finished');
        });
    });
});
</script>
</head>

<body>
<p><button>Toggle</button></p>
<div>Fade Toggle</div>
</body>
</html>

Hiển thị trình duyệt:

Hiệu ứng sẽ luân phiên hiển thị và ẩn thông qua nhiều lần click vào button, 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>Toggle</button></p> <div>Fade Toggle</div>	<p><button>Toggle</button></p> <div style="display: block; color: yellow;">Finished</div>

.fadeToggle(Độ bền,'easing',function(){...})

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;
    display: none;
    float: left;
    margin-right: 20px;
    height: 100px;
    width: 100px;
}
p {
    clear: both;
}
</style>
<script>
$(function(){
    $('button').click(function(){
        $('div').fadeToggle(2000,'linear',function(){
            $(this).css('color','yellow').text('Finished');
        });
    });
});
</script>
</head>

<body>
<p><button>Toggle</button></p>
<div>Fade Toggle</div>
</body>
</html>

Hiển thị trình duyệt:

Hiệu ứng sẽ luân phiên hiển thị và ẩn thông qua nhiều lần click vào button, 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>Toggle</button></p> <div>Fade Toggle</div>	<p><button>Toggle</button></p> <div style="display: block; color: yellow;">Finished</div>

.fadeTo()

.filter()