Анимация элементов text-shadow с помощью jQuery

Мне было интересно, есть ли способ, используя jQuery, анимированные свойства текстового тени, такие как размер или цвет.

Это раздражает, что нет отдельных свойств, таких как text-shadow-color вместо того, чтобы оператор был доступен только в комбинированной форме.

Ответы

Ответ 1

Возможно, будет немного поздно для этого ответа, но здесь все равно...

Я решил это, реализовав "виртуальное" css-свойство, которое будет анимировано как

$.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});

Это описано более подробно здесь: http://usefulthink.com/2010-12/animating-text-shadow-using-jquery

Некоторые другие подходы можно найти здесь: http://forum.jquery.com/topic/let-s-animate-text-shadow

Ответ 2

В качестве альтернативы использованию jQuery вы можете использовать мощные возможности анимации UIZE JavaScript Framework. См. Различные элементы нескольких текстовых теней, которые анимируются одновременно в следующем примере...

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

Ответ 3

Единственный способ, которым я действительно работал, - создать <span> с тем же текстом, что и <a>, и наложить его, используя абсолютное позиционирование, отрицательные поля и .fadeIn()/. fadeOut() или непрозрачность анимации. Но даже это было глючит в лучшем случае из-за всех "на ходу" расширения элементов, а наложение было "отвлечено", смотря в лучшем случае.

Ответ 4

Почему бы не использовать addClass ('shadow') и добавить переход к элементу?

Конечно, это не работает в старом IE...

Ответ 5

Используйте javascript для анализа свойства CSS и создания нового

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

предоставит вам свойство

Используйте javascript String для работы с ним: http://www.w3schools.com/jsref/jsref_obj_string.asp и parsefloat ('2px') даст вам только 2