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;
đặc biệt
Kiểu.
Một đối tượng chứa một hoặc nhiều thuộc tính CSS được xác định bởi đối số thuộc tính và các hàm nới lỏng tương ứng của chúng. [đã thêm phiên bản. 1. 4]
bước chân
Kiểu. [bây giờ, mười hai]
Một hàm được gọi cho từng thuộc tính hoạt ảnh của từng thành phần hoạt ảnh. Hàm này cung cấp cơ hội sửa đổi đối tượng Tween để thay đổi giá trị của thuộc tính trước khi nó được đặt
tiến triển
Kiểu. [ hình ảnh động, tiến trình, còn lạiMs ]
Một hàm được gọi sau mỗi bước của hoạt ảnh, chỉ một lần cho mỗi phần tử hoạt ảnh bất kể số lượng thuộc tính hoạt ảnh. [đã thêm phiên bản. 1. 8]
hoàn thành
Kiểu. []
Một chức năng được gọi sau khi hoạt ảnh trên một phần tử hoàn tất
bắt đầu
Kiểu. [ hoạt hình ]
Một hàm để gọi khi hoạt ảnh trên phần tử bắt đầu. [đã thêm phiên bản. 1. 8]
xong
Kiểu. [ hoạt hình, jumpToEnd ]
Một hàm được gọi khi hoạt ảnh trên một phần tử hoàn thành [đối tượng Promise của nó đã được giải quyết]. [đã thêm phiên bản. 1. 8]
thất bại
Kiểu. [ hoạt hình, jumpToEnd ]
Một hàm được gọi khi hoạt ảnh trên một phần tử không hoàn thành [đối tượng Promise của nó bị từ chối]. [đã thêm phiên bản. 1. 8]
luôn luôn
Kiểu. [ hoạt hình, jumpToEnd ]
Một hàm được gọi khi hoạt ảnh trên một phần tử hoàn thành hoặc dừng mà không hoàn thành [đối tượng Promise của nó được giải quyết hoặc bị từ chối]. [đã thêm phiên bản. 1. 8]
phiên bản thêm. 1. 4. 3
thời lượng [mặc định.
400
]Kiểu. hoặc
Một chuỗi hoặc số xác định thời lượng hoạt ảnh sẽ chạy
nới lỏng [mặc định.
0]Click here
Kiểu.
Một chuỗi cho biết chức năng nới lỏng nào sẽ được sử dụng cho quá trình chuyển đổi
hoàn thành
Kiểu. []
Một hàm để gọi sau khi hoạt ảnh hoàn tất, được gọi một lần cho mỗi phần tử phù hợp
phiên bản thêm. 1. 3
trưng bày
Kiểu.
Sử dụng
1 để hiển thị phần tử hoặcClick here
6 để ẩn nóClick here
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
7 chỉ đơn giản là bật/tắt chế độ hiển thị của các phần tử
Click here
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
8. Nếu phần tử được hiển thị ban đầu, nó sẽ bị ẩn đi; . Tài sản
Click here
8 được lưu và khôi phục khi cần. Nếu một phần tử có giá trị
Click here
8 là
Click here
1, sau đó bị ẩn và hiển thị, nó sẽ hiển thị lại một lần nữa
$[ "#clickme" ].click[function[] {
$[ "#book" ].toggle[ "slow", function[] {
// Animation complete.
}];
}];
1
$[ "#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ì
7 sẽ trở thành một phương thức hoạt hình. Phương thức
Click here
7 tạo hiệu ứng đồng thời cho chiều rộng, chiều cao và độ mờ của các phần tử phù hợp. Khi các thuộc tính này về 0 sau hoạt ảnh ẩn, thuộc tính kiểu
Click here
8 được đặt thành
Click here
6 để đảm bảo rằng phần tử không còn ảnh hưởng đến bố cục của trang
$[ "#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
7 và
$[ "#clickme" ].click[function[] {
$[ "#book" ].toggle[ "slow", function[] {
// Animation complete.
}];
}];
8 có thể được cung cấp để biểu thị thời lượng lần lượt là
$[ "#clickme" ].click[function[] {
$[ "#book" ].toggle[ "slow", function[] {
// Animation complete.
}];
}];
9 và
$[ "#clickme" ].click[function[] {
$[ "#book" ].toggle[ "slow", function[] {
// Animation complete.
}];
}];
0 mili giây
$[ "#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à
0 và một triển khai tiến triển với tốc độ không đổi, được gọi là
Click here
2. Nhiều chức năng nới lỏng hơn có sẵn khi sử dụng các trình cắm thêm, đáng chú ý nhất là bộ giao diện người dùng jQuery
$[ "#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
3 được đặt thành phần tử DOM đang hoạt ảnh. Nếu nhiều phần tử được tạo hoạt ảnh, điều quan trọng cần lưu ý là lệnh gọi lại được thực hiện một lần cho mỗi phần tử phù hợp, không phải một lần cho toàn bộ hoạt ảnh
$[ "#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
Click here
Chúng tôi sẽ làm cho
7 được gọi khi một phần tử khác được nhấp vào
Click here
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
Hình 1 - Minh họa hiệu ứng5 khi ẩn ảnh
$[ "#foo" ].toggle[ display ];
Lần nhấp thứ hai sẽ hiển thị lại phần tử
Hình 2 - Minh họa hiệu ứng5 khi hiển thị hình ảnh
$[ "#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à
1, thì các phần tử phù hợp sẽ được hiển thị; . Về bản chất, tuyên bố
Click here
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
7, có thể được tắt trên toàn cầu bằng cách đặtClick here
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ắtif [ display === true ] {
$[ "#foo" ].show[];
} else if [ display === false ] {
$[ "#foo" ].hide[];
}
ví dụ
Chuyển đổi tất cả các đoạn
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
toggle demo
Toggle
Hello
Good Bye
$[ "button" ].click[function[] {
$[ "p" ].toggle[];
}];
Thử nghiệm
Hoạt ảnh tất cả các đoạn sẽ được hiển thị nếu chúng bị ẩn và ẩn nếu chúng hiển thị, hoàn thành hoạt ảnh trong vòng 600 mili giây