CSS3 Text Shadow & Opacity Ошибка - [fadeOut () / fadeIn () в Jquery] - PullRequest
2 голосов
/ 24 февраля 2011

Существует известная проблема с использованием jquery fadeOut, fadeIn и fadeToggle при затухании текста, который не имеет цвета фона или изображения.(Текст имеет зеленую сглаживающую вещь, которая происходит во время перехода)

Возьмем это, к примеру. jQuery цикл: исчезающий белый текст становится «зеленым» в Windows / Firefox / Cleartype Enabled

Недавно я обнаружил, что это происходит и с использованием тени текста css 3, к сожалению, вы не можете установить фонцвет на текстовой тени, есть ли у кого-нибудь решения или обходной путь для этого?

Вот пример ошибки / проблемы

http://jsfiddle.net/blowsie/2UMJ4/


Обновление:

Я нашелодин обходной путь, который можно найти в моем ответе ниже, любые другие решения или обходные пути, все равно будет полезно узнать.

Ответы [ 4 ]

1 голос
/ 28 февраля 2011

Я только что нашел один обходной путь, который можно использовать в определенных сценариях.

http://jsfiddle.net/blowsie/2UMJ4/8/

Используя непрозрачность rgba, вы можете воссоздать определенные цвета и получить затенение текста без проблем сглаживания.

text-shadow:50px 50px rgba(0,0,0,0.2);
0 голосов
/ 27 октября 2011

Как сказал в комментарии RoToRa, вы можете просто уменьшить непрозрачность атрибута color до 0.99, используя rgba. Вот быстрое решение, если вы не хотите менять все свои цветовые атрибуты. Прекрасно работает для меня

$('*').css('color', function(index, value) {
    return value.replace('rgb', 'rgba').replace(')', ', 0.99)');
});

Редактировать: убедитесь, что вы используете это исправление только для тех браузеров, где оно вам нужно (я считаю, что это только Chrome), так как старые браузеры не поддерживают rgba.

0 голосов
/ 03 марта 2011

Этот код превратит элемент в невидимый, а затем вернет его обратно.

$('#button').click(function() {
    $('h1').css({'text-shadow':'none'}).fadeToggle('slow')
});

См. Это: http://jsfiddle.net/2UMJ4/10/

0 голосов
/ 24 февраля 2011

Кажется, это не проблема с jQuery, но ошибка в Chrome / Webkit, потому что это также происходит, когда вы прямо указываете элемент opacity.

Кроме сообщения об этом и избежанияпока я не исправлюсь, я не могу придумать, что ты можешь сделать.

...