Các yếu tố hoạt hình của bóng văn bản với jQuery

Question

Tôi đã tự hỏi nếu có bất kỳ cách nào, bằng cách sử dụng jQuery, các thuộc tính động của văn bản bóng như kích thước hoặc màu sắc.

Thật khó chịu khi không có các thuộc tính riêng lẻ như text-shadow-color thay vì câu lệnh chỉ có sẵn ở dạng kết hợp.

Answer 1

Sử dụng javascript để phân tách thuộc tính CSS và tạo ra một cái mới

var myelement_shadow = $('myelement').css('text-shadow'); 

sẽ cung cấp cho bạn tài sản

chức năng Chuỗi

Sử dụng javascript để làm việc với nó: http://www.w3schools.com/jsref/jsref_obj_string.asp và parseFloat ('2px') sẽ chỉ cung cấp cho bạn 2

Answer 2

Để thay thế cho việc sử dụng jQuery, bạn có thể sử dụng khả năng hoạt ảnh mạnh mẽ của Khung JavaScript UIZE. Xem yếu tố khác nhau của nhiều bóng văn bản được hoạt hình cùng lúc trong ví dụ sau ...

http://www.uize.com/examples/hover-fader-text-shadow-animation.html

Answer 3

Có thể là một chút trễ cho câu trả lời này, nhưng ở đây nó là anyway ...

tôi giải quyết nó bằng cách thực hiện một "ảo" css-tài sản để được hoạt hình như thế này

$.fx.step.textShadowBlur = function(fx) { 
    $(fx.elem).css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px black'}); 
}; 

$(el).css({textShadowBlur:20}) 
    .animate({textShadowBlur:1}, {duration: 1000}); 

này được mô tả chi tiết ở đây: http://usefulthink.com/2010-12/animating-text-shadow-using-jquery

Một số phương pháp khác có thể được tìm thấy ở đây: http://forum.jquery.com/topic/let-s-animate-text-shadow

Answer 4

Cách duy nhất tôi thấy rằng thực sự đã làm việc đã tạo ra một <span> với nội dung giống với các <a> và bao phủ nó sử dụng định vị tuyệt đối, lợi nhuận tiêu cực, và .fadeIn() /. fadeOut() hoặc hoạt ảnh mờ đục. Nhưng ngay cả điều đó cũng không ổn khi tốt nhất vì tất cả sự mở rộng của các yếu tố trên bay và lớp phủ là loại 'tắt' nhìn tốt nhất.

Answer 5

Tại sao không sử dụng addClass ('bóng') và thêm quá trình chuyển đổi trên phần tử?

Tất nhiên điều này không hoạt động trong IE cũ ...