jQuery có hoạt ảnh giữa hai lớp CSS khác nhau không?

Question

Tôi đang cố gắng hiểu cách hoạt ảnh của jQuery hoạt động.

Ví dụ, nếu tôi có một yếu tố a với CSS mà làm cho nó trông giống như một hình ảnh liên kết và trao with và height trong CSS, làm thế nào tôi một cách an toàn animate width và height của nguyên tố này?

Tôi có cần tạo hoạt ảnh cho các giá trị trong lớp CSS không? Hoặc tôi có cần đặt một lớp CSS mới với các giá trị đích cho width và height và để jQuery hoạt ảnh từ oldClass đến newClass?

Hoặc tôi có thể đơn giản sử dụng phương thức .width() và .height() của jQuery, bất kể giá trị nào được chỉ định trong CSS?

Điều làm tôi bối rối là: Nếu tôi tinh chỉnh chiều rộng của phần tử với jQuery, điều này cũng sửa đổi CSS của tôi hay jQuery/JavaScript chỉ ghi đè các giá trị được chỉ định trong CSS bằng một cái gì đó khác? Ý tôi là: Sau khi sử dụng jQuery để chỉnh sửa chiều rộng, chiều rộng này có trở thành giá trị mới trong tệp CSS không? Tôi có thể áp dụng lớp này cho các phần tử khác và chúng sẽ có chiều rộng mới không?

Answer 1

Nó sẽ vượt qua kiểu nội tuyến.

Bây giờ tôi sẽ hiển thị phiên bản có phần trên cùng, bên trái là hoạt ảnh nhưng bạn có thể áp dụng phiên bản đó trên hầu hết các thuộc tính CSS.

HTML

<span id="test">blablabla</span> 

CSS

span{ 
    position:absolute; 
    display:block; 
    height:50px; 
    width:50px; 
} 

jquery

$('#test').animate({top:'100px',left:'50px'}, 500); 

fiddle

Answer 2

jQuery animate chỉ làm hoạt hình các giá trị css số. Nó sẽ không sinh động giữa các lớp (xem ví dụ bên dưới để biết cách thực hiện điều đó). Hàm .animate() bổ sung css mà bạn cung cấp cho nó như là một paramater và thêm nó làm css nội dòng. Nó sẽ luôn ghi đè lên bản định kiểu CSS của bạn. Điều này là tốt nhưng một chút lộn xộn và có thể ra khỏi tầm kiểm soát rất dễ dàng.

Tuy nhiên, nếu bạn muốn tạo hiệu ứng động giữa các lớp, tốt hơn cho hiệu suất và sạch hơn để sử dụng thuộc tính chuyển tiếp css3. Xem ví dụ:

HTML

<div class="myTestAnimation">Something to test</div> 

JQuery (có thể sử dụng vani javascript cho điều này cũng). Chỉ cần chuyển đổi giữa các lớp. Bằng cách này bạn không có bất kỳ thông tin phong cách trong css của bạn cả.

jQuery(document).ready(function($) { 
    $(".myTestAnimation").click(function() { 
     $(this).toggleClass("animate"); 
    }); 
}); 

CSS (hoạt ảnh này có chiều rộng và chiều cao và màu nền) .animate() sẽ không tạo hiệu ứng màu nền để tăng thêm tiền thưởng.

.myTestAnimation { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    -webkit-transition: background-color 300ms linear, width 300ms linear, height 300ms linear; 
    transition: background-color 300ms linear, width 300ms linear, height 300ms linear; 
    position: relative; 
} 
.myTestAnimation.animate { 
    background-color: blue; 
    width: 200px; 
    height: 200px; 
} 

Answer 3

Tôi biết đã lâu rồi, nhưng cũng có thể giúp ai đó tìm câu trả lời.Dựa vào thuộc tính chuyển tiếp CSS3 có thể dẫn đến rắc rối khi muốn hỗ trợ các trình duyệt cũ hơn.

Hành vi yêu cầu của hoạt ảnh giữa hai trạng thái (Lớp CSS) hoàn toàn có thể được thực hiện bằng cách sử dụng jQuery UI, hỗ trợ điều này bằng cách mở rộng phương thức switchClass(). Nó cũng hỗ trợ tất cả các đặc quyền của phương pháp animate(), chẳng hạn như thời gian, giảm bớt, callback vv

Theo các tiểu bang tài liệu chính thức: '

Tương tự như hiệu ứng chuyển tiếp CSS bản xứ, hình ảnh động lớp jQuery UI của cung cấp chuyển đổi suôn sẻ từ trạng thái này sang trạng thái khác trong khi cho phép bạn giữ tất cả chi tiết về các kiểu thay đổi trong CSS và trong số JavaScript của bạn.

Bạn có thể đọc tất cả về nó here.

Giao diện người dùng jQuery cũng có thể được biên soạn để chỉ bao gồm những thứ bạn cần, vì vậy bạn có thể giảm kích thước của thư viện bằng cách loại trừ các tính năng bạn sẽ không sử dụng. Kiểm tra các tùy chọn có sẵn here.

Hy vọng nó đã giúp ai đó!