Làm cách nào để bật và tắt trong JavaScript?

Boolean cho biết có nên đặt hoạt ảnh trong hàng đợi hiệu ứng hay không. Nếu sai, hoạt ảnh sẽ bắt đầu ngay lập tức. Kể từ jQuery 1. 7, tùy chọn hàng đợi cũng có thể chấp nhận một chuỗi, trong trường hợp đó, hoạt ảnh được thêm vào hàng đợi được đại diện bởi chuỗi đó. Khi tên hàng đợi tùy chỉnh được sử dụng, hoạt ảnh không tự động bắt đầu;

Ghi chú. Bộ xử lý sự kiện cũng có một phương thức có tên. chuyển đổi (). Cái nào được kích hoạt tùy thuộc vào tập hợp các đối số được truyền

Không có tham số, phương thức

<div id="clickme">
  Click here
div>
<img id="book" src="book.png" alt="" width="100" height="123">

1

$( ".target" ).toggle();

Các yếu tố phù hợp sẽ được hiển thị hoặc ẩn ngay lập tức, không có hoạt ảnh, bằng cách thay đổi thuộc tính CSS

<div id="clickme">
  Click here
div>
<img id="book" src="book.png" alt="" width="100" height="123">

<div id="clickme">
  Click here
div>
<img id="book" src="book.png" alt="" width="100" height="123">

<div id="clickme">
  Click here
div>
<img id="book" src="book.png" alt="" width="100" height="123">

$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {
    // Animation complete.
  });
});

$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {
    // Animation complete.
  });
});

Khi một khoảng thời gian, một đối tượng đơn giản hoặc một chức năng "hoàn thành" duy nhất được cung cấp, thì

<div id="clickme">
  Click here
div>
<img id="book" src="book.png" alt="" width="100" height="123">

<div id="clickme">
  Click here
div>
<img id="book" src="book.png" alt="" width="100" height="123">

<div id="clickme">
  Click here
div>
<img id="book" src="book.png" alt="" width="100" height="123">

$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {
    // Animation complete.
  });
});

Thời lượng được tính bằng mili giây; . Các chuỗi

$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {
    // Animation complete.
  });
});

$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {
    // Animation complete.
  });
});

$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {
    // Animation complete.



  });
});

$( "#foo" ).toggle( display );

Kể từ jQuery 1. 4. 3, có thể sử dụng một chuỗi tùy chọn đặt tên cho chức năng nới lỏng. Các chức năng nới lỏng chỉ định tốc độ mà hoạt ảnh tiến triển tại các điểm khác nhau trong hoạt ảnh. Các triển khai nới lỏng duy nhất trong thư viện jQuery là mặc định, được gọi là

<div id="clickme">
  Click here
div>
<img id="book" src="book.png" alt="" width="100" height="123">

$( "#foo" ).toggle( display );

Nếu được cung cấp, lệnh gọi lại sẽ được kích hoạt sau khi hoạt ảnh hoàn tất. Điều này có thể hữu ích để xâu chuỗi các hoạt ảnh khác nhau theo trình tự. Cuộc gọi lại không được gửi bất kỳ đối số nào, nhưng

$( "#foo" ).toggle( display );

Chúng tôi có thể làm động bất kỳ yếu tố nào, chẳng hạn như một hình ảnh đơn giản

1

2

3

4

<div id="clickme">
  Click here
div>
<img id="book" src="book.png" alt="" width="100" height="123">

Chúng tôi sẽ làm cho

<div id="clickme">
  Click here
div>
<img id="book" src="book.png" alt="" width="100" height="123">

1

2

3

4

5

$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {
    // Animation complete.
  });
});

Với phần tử được hiển thị ban đầu, chúng ta có thể ẩn nó từ từ bằng cú nhấp chuột đầu tiên

$( "#foo" ).toggle( display );

Lần nhấp thứ hai sẽ hiển thị lại phần tử

$( "#foo" ).toggle( display );

Phiên bản thứ hai của phương thức chấp nhận tham số Boolean. Nếu tham số này là

<div id="clickme">
  Click here
div>
<img id="book" src="book.png" alt="" width="100" height="123">

1

$( "#foo" ).toggle( display );

tương đương với

1

2

3

4

5

if ( display === true ) {
  $( "#foo" ).show();
} else if ( display === false ) {



  $( "#foo" ).hide();
}

Ghi chú bổ sung

• Tất cả các hiệu ứng jQuery, bao gồm

  <div id="clickme">
    Click here
  div>
  <img id="book" src="book.png" alt="" width="100" height="123">

  7, có thể được tắt trên toàn cầu bằng cách đặt

  if ( display === true ) {
    $( "#foo" ).show();
  } else if ( display === false ) {
    $( "#foo" ).hide();
  }

  0, đặt thời lượng thành 0 một cách hiệu quả. Để biết thêm thông tin, xem jQuery. fx. tắt

html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle demotitle>
  <script src="https://code.jquery.com/jquery-3.6.3.js">script>
head>
<body>
 
<button>Togglebutton>
<p>Hellop>
<p style="display: none">Good Byep>
 
<script>
$( "button" ).click(function() {
  $( "p" ).toggle();
});
script>
 
body>
html>