.fadeToggle()

Đị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).
• .fadeToggle() được ứng dụng trong menu, khi hover sẽ xuất hiện hoặc ẩn menu con.

.fadeToggle(độ bền)

Cấu trúc

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

$('p').fadeToggle('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;
    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:

Toggle

Fade Toggle 800

Fade Toggle fast

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:

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

Cấu trúc

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

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

<!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() {
    $('.test03').fadeToggle(1400,'swing');
    $('.test04').fadeToggle(1400,'linear');
  });
});
</script>
</head>

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

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

Toggle

Fade Toggle 1400 swing

Fade Toggle 1400 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:

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

Cấu trúc

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

<!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:

Toggle

Fade Toggle

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: