.slideToggle()

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

• .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).
• .slideToggle() được ứng dụng để tạo menu slide, khi click hoặc hover thì menu con sẽ luân phiên slide lên xuống, hoặc có thể dùng để tạo accordion.

.slideToggle(độ bền)

Cấu trúc

$('p').slideToggle(300);

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

<body>
  <p><button>Click</button></p>
  <div class="test01">slideToggle(2000)</div>
  <div class="test02">slideToggle(slow)</div>
</body>
</html>

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

Click

slideDown(2000)

slideDown(slow)

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:

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

Cấu trúc

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

<!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;
  }
</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:

Click

Thành phần div

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:

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

Cấu trúc

$('p').slideToggle(300,'swing');

<!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(){
    $('.test-04').slideToggle(2000,'swing');
    $('.test-05').slideToggle(2000,'linear');
  });
});
</script>
</head>

<body>
  <p><button>Click</button></p>
  <div class="test-04">slideToggle swing</div>
  <div class="test-05">slideToggle linear</div>
</body>
</html>

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

Click

slideUp swing

slideUp linear

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: