Nếu bạn lần đầu tiên sử dụng jQuery cách đây nhiều năm, có thể đó là khả năng tạo hoạt ảnh. Đó có lẽ là một trong những điểm thu hút lớn đầu tiên của jQuery. Ngày nay, CSS cũng có thể tạo hoạt ảnh với sự hỗ trợ của trình duyệt khá tốt và nó có xu hướng hoạt động hiệu quả hơn, vì vậy nó ít liên quan hơn. Tuy nhiên, nếu bạn cần hỗ trợ trình duyệt siêu sâu, jQuery vẫn hoàn toàn là một lựa chọn.
Chúng tôi đã trình bày cách thay đổi CSS trong jQuery. Nó trông như thế này:
$("#element").css(( "background-color": "red", "left": "20px" ));Thay vì chuyển ngay phần tử đó sang các giá trị đó, chúng ta có thể tạo hiệu ứng cho chúng. Nó trông gần giống hệt nhau:
$("#element").animate(( "background-color": "red", "left": "20px" ));Đây là chiếc bút chúng tôi đã làm trong video:
Xem Bút e111fbfa7506d19034d977b17e2160a3 của Chris Coyier (@chriscoyier) trên CodePen
Nếu chúng ta kiểm tra phần tử đó trong các công cụ dành cho nhà phát triển của trình duyệt, chúng ta có thể biết cách jQuery thực hiện hoạt ảnh đó. Về cơ bản, nó nhanh chóng lặp lại kiểu nội tuyến được áp dụng cho các phần tử đó
Trong video này, chúng ta tìm hiểu một số mã jQuery mà người khác đã viết để xem chúng ta có thể mổ xẻ nó tốt như thế nào.
Xem chiều cao hoạt ảnh Pen jQuery: auto của Josh Parrett (@JTParrett) trên CodePen
Trong cuộc hành trình đó, chúng ta sẽ trải qua một cuộc hành trình nhỏ thú vị về chuyển động lên các độ cao tự động. Đây là điều mà cả CSS hay JavaScript đều không thể làm tốt. Họ thích những con số cứng. Tạo hoạt ảnh từ 10px đến 200px có ý nghĩa. Tạo hoạt ảnh 10px thành "bất cứ điều gì bạn bình thường" không phải là dễ dàng.
Trong mã của Josh, chúng tôi tìm thấy một chức năng thông minh về cơ bản đặt chiều cao thành tự động, đo lường, đặt chiều cao trở lại như cũ, sau đó hoạt ảnh thành giá trị mới được thử nghiệm đó. Thủ thuật khá gọn gàng! Để có một bản trình diễn mạnh mẽ hơn quay đi quay lại và bằng JavaScript thô, hãy xem tại đây.
Tôi đã không nhận thấy cho đến khi video kết thúc, nhưng jQuery thực sự cũng giúp chúng tôi làm điều này. Tệp theo lý do để sử dụng jQuery # 40985. Sử dụng .slideUp/ .slideDown/ .slideToggle- nó chỉ hoạt động bằng cách nào đó, ngay cả khi phần tử bị ẩn với display: noneđể bắt đầu.
Xem chiều cao hoạt ảnh Pen jQuery: auto của Chris Coyier (@chriscoyier) trên CodePen
Để kiểm tra công việc của chúng tôi trong IE cũ, chúng tôi đã sử dụng BrowserStack, cũng được tích hợp trong CodePen.