.fadeIn()

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

.fadeIn() hiển thị các thành phần với hiệu ứng rõ dần (fade in).
.fadeIn() được ứng dụng trong menu, khi hover sẽ xuất hiện menu con

Cấu trúc

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

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

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

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

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

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

Bài học chỉ muốn cho bạn hiểu cách sử dụng .fadeIn, muốn biết chi tiết hơn, bạn có thể xem chi tiết thêm tại phần tham khảo.

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

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

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

Làm thử!

Click vào button để thấy hiệu ứng.

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

Trước khi có jQuery	Sau khi có jQuery
<p><button>Click</button></p> <div class="test03">fadeIn(2000)</div> <div class="test02">fadeIn('slow')</div> <div class="test01">fadeIn()</div>	<p><button>Click</button></p> <div class="test03" style="display: block;">fadeIn(2000)</div> <div class="test02" style="display: block;">fadeIn('slow')</div> <div class="test01" style="display: block;">fadeIn()</div>

.fadeIn(Độ 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').fadeIn(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:

Làm thử!

Click vào button để thấy hiệu ứng, 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>Click</button></p> <div>Thành phần div</div>	<p><button>Click</button></p> <div style="display: block; background-color: red;">Thành phần div</div>

.width()

.fadeOut()