Có cách nào trong jQuery để tạo hoạt ảnh cho css3 border-radius thuộc tính có sẵn trong trình duyệt Webkit và Mozilla không?jQuery animate css border-radius property (webkit, mozilla)
Tôi chưa tìm thấy plugin sẽ làm điều đó.
-webkit-border-radius
-moz-border-radius
tôi dự kiến ban đầu là một cái gì đó giống như ...
$("selector")
.css({borderRadius: 10});
.animate({borderRadius: 30}, 900);
... sẽ làm việc. Nhưng, tôi đã sai: Webkit cho phép bạn đặt giá trị cho tất cả bốn góc qua borderRadius, nhưng sẽ không cho phép bạn đọc lại - vì vậy với mã ở trên, hoạt ảnh sẽ luôn bắt đầu ở 0 thay vì 10. IE có cùng một vấn đề. Firefox sẽ cho phép bạn đọc lại, vì vậy mọi thứ hoạt động như mong đợi ở đó.
Vâng ... bán kính biên giới có một lịch sử khác biệt về triển khai.
May mắn thay, có một công việc xung quanh: chỉ cần chỉ định mỗi góc bán kính riêng lẻ:
$("selector")
.css({
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10 })
.animate({
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
borderBottomLeftRadius: 30,
borderBottomRightRadius: 30}, 900);
Lưu ý rằng nếu bạn muốn duy trì khả năng tương thích với các trình duyệt cũ, bạn có thể đi tất cả ra và sử dụng browser- cũ tên có tiền tố:
$("selector")
.css({
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
WebkitBorderTopLeftRadius: 10,
WebkitBorderTopRightRadius: 10,
WebkitBorderBottomLeftRadius: 10,
WebkitBorderBottomRightRadius: 10,
MozBorderRadius: 10
})
.animate({
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
borderBottomLeftRadius: 30,
borderBottomRightRadius: 30,
WebkitBorderTopLeftRadius: 30,
WebkitBorderTopRightRadius: 30,
WebkitBorderBottomLeftRadius: 30,
WebkitBorderBottomRightRadius: 30,
MozBorderRadius: 30
}, 900);
Điều này bắt đầu trở nên khá điên rồ; Tôi sẽ tránh nó nếu có thể.
Sử dụng cssHooks.
Điều này sẽ giúp bạn ra ngoài:
http://www.webmuse.co.uk/articles/border_radius_csshook_with_internet_explorer_support/
Liên kết đến các cssHooks:
https://github.com/brandonaaron/jquery-cssHooks
Chúc may mắn!
Juste một lời khuyên, chúng ta có thể sử dụng chức năng rà soát CSS của trình duyệt prefix Dưới đây là một số mẫu mã .. http://jsfiddle.net/molokoloco/f6Z3D/
Vâng, loại. Cho đến nay, nếu có bất kỳ bán kính nào được đặt trong biểu định kiểu, các góc sẽ chụp hình vuông, sau đó tạo hình động đến 30 (để sử dụng ví dụ của bạn) từ đó. Có vẻ như muốn đi từ 0 đến bất kỳ giá trị nào được đưa ra. Tôi nhận được kết quả tương tự trong Safari và Firefox 3.5 beta. – user113716
Chỉnh sửa: Có vẻ như hoạt động chính xác trong Firefox. Safari chỉ muốn tăng. – user113716
Trông giống như bất kỳ hướng nào tôi đi, Safari luôn bắt đầu bằng cách chụp tới 0. Bất kỳ ý tưởng giải pháp nào? Cảm ơn. – user113716