Định nghĩa và sử dụng .slideToggle() trong jQuery

.slideToggle(): Hiển thị và ẩn các thành phần phù hợp với hiệu ứng chuyển động trượt (slide). Việc hiển thị và ẩn được luân phiên nhau giữa các lần action (VD action Click).

Cấu trúc .slideToggle() trong jQuery

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

.slideToggle(Độ bền)

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

$('p').slideToggle(300);
$('p').slideToggle(fast);
.slideToggle(Độ bền,function(){...})

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

$('p').slideToggle(300,function(){
    $('span').fadeIn(100);
});

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

.slideToggle(Độ 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').slideToggle(300,'swing');
.slideToggle(Độ 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').slideToggle(300,'swing',function(){
    $('span').fadeIn(100);
});

.slideToggle(Độ 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;
    display: none;
    float: left;
    margin-right: 20px;
    height: 100px;
    width: 150px;
}
p {
    clear: both;
}
</style>
<script>
$(function(){
    $('button').click(function(){
        $('.test03').slideToggle(2000);
        $('.test02').slideToggle('slow');
    });
});
</script>
</head>

<body>
<p><button>Click</button></p>
<div class="test03">slideToggle(2000)</div>
<div class="test02">slideToggle(slow)</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.

.slideToggle(Độ 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;
    display: none;
    float: left;
    margin-right: 20px;
    height: 100px;
    width: 150px;
}
p {
    clear: both;
}
</style>
<script>
$(function(){
    $('button').click(function(){
        $('div').slideToggle(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 button, sau khi hoàn thành hiệu ứng sẽ hiển thị nội dung bên trong function.

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

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;
    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').slideToggle(2000,'swing');

        $('.linear').slideToggle(2000,'linear');
    });
});
</script>
</head>

<body>
<p><button>Click</button></p>
<div class="swing">slideToggle swing</div>
<div class="linear">slideToggle 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.

.slideToggle(Độ 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;
    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').slideToggle(2000,'swing',function(){
            $(this).addClass('visible').text('Nội dung mới');
        });

        $('.linear').slideToggle(2000,'linear',function(){
            $(this).addClass('visible').text('Nội dung mới');
        });
    });
});
</script>
</head>

<body>
<p><button>Click</button></p>
<div class="swing">slideToggle swing</div>
<div class="linear">slideToggle 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, sau khi hoàn thành hiệu ứng sẽ hiển thị nội dung bên trong function.

Viết câu trả lời

Drop Images

0 Bình luận