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

Question

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

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

Answer 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

Answer 2

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

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

даст вам собственность

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