Show Định nghĩa và sử dụng
Cấu trúc.toggle(Độ bền) Độ bền có thể bằng số hoặc bằng chữ: slow, fast. $('p').toggle(300); $('p').toggle(fast); .toggle(Độ 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').toggle(300,'swing'); Bài học chỉ muốn cho bạn hiểu cách sử dụng .toggle(Độ 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;
display: none;
height: 100px;
width: 150px;
}
</style>
<script>
$(function(){
$('button').click(function(){
$('.test03').toggle(2000);
});
});
</script>
</head>
<body>
<p><button>Click</button></p>
<div class="test03">toggle(2000)</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 So sánh code HTML trước và sau khi có jQuery:
.toggle(Độ 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;
height: 100px;
width: 150px;
}
</style>
<script>
$(function(){
$('button').click(function(){
$('div').toggle(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:Hiệu ứng sẽ luân phiên hiển thị và ẩn thông qua nhiều lần click vào So sánh code HTML trước và sau khi có jQuery:
.toggle(Độ 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; display: none; float: left; margin-right: 20px; height: 100px; width: 150px; } p { clear: both; } .visible { background-color: red; display: block!important; } </style> <script> $(function(){ $('button').click(function(){ $('.swing').toggle(2000,'swing'); $('.linear').toggle(2000,'linear'); }); }); </script> </head> <body> <p><button>Click</button></p> <div class="swing">toggle swing</div> <div class="linear">toggle 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 So sánh code HTML trước và sau khi có jQuery:
|