ИСПРАВЛЕНО Текст становится странным, когда анимация jquery исчезает на Chrome - PullRequest
Новая
       12

ИСПРАВЛЕНО Текст становится странным, когда анимация jquery исчезает на Chrome

3 голосов
/ 01 апреля 2012

JavaScript 

$(function() {

    $('#lol').hover(function() {

        $(this).stop().animate({opacity:0.5});

    },function() {

        $(this).stop().animate({opacity:1});

    });

});

CSS 

#lol {
padding:20px; background-color:#FF0000; color:#FFF; font-size:15px; font-family:arial; width:300px; opacity:1; filter:alpha(opacity=100); position:relative;
}

HTML 

<div id="lol">text</div>

В Firefox и Internet Explorer он работает нормально, но в Chrome текст становится странным при исчезновении - похоже, этот текст теряет открытый тип.

Как я могу это исправить?

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

решение: настройка -khtml-opacity: 0,99; и на mouseleave установите его на 0,99. сафари и хром будут работать нормально :) 1026 *

Ответы [ 2 ]

11 голосов
/ 01 апреля 2012

Вы не можете исправить это, чтобы быть счастливым, но у вас есть варианты.

  1. установить заднюю сторону webkit скрытой (так же, как ниже), я также нахожу, что это исправляет многие webkitошибки дисплея) http://jsfiddle.net/FSkXL/

  2. установите элемент на 0,9 вместо 1. Это предотвратит изменение (более последовательный) текст, оставив его «странным» http://jsfiddle.net/7YNhM/

  3. вы можете использовать изображение вместо текста, png или svg, что означает, что текст не будет редактируемым. Webtext

  4. холст, тонны дополнительной сложности

Это фундаментальная часть того, как Chrome отрисовывает текст, и просто не существует чистого способа обойти это.

0 голосов
/ 01 апреля 2012

У меня отлично работает: текст не меняется. Другие могут подтвердить, глядя на jsFiddle .

Но я сталкивался с этой ошибкой раньше. Я обнаружил, что с анимацией Chrome иногда размывает или деформирует текст (также с переходами CSS3). Я думаю, что это связано с вашим аппаратным ускорением и настройками графики.

Как указал другой пользователь в этом посте , похоже, что в Chrome возникают проблемы с событием hover () jQuery, поэтому, возможно, вы можете использовать другие методы: 

$(function() {
   $("#lol").
   mouseenter(function(){$(this).animate({opacity:0.5}, 900);}).
   mouseleave(function(){$(this).animate({opacity:1}, 900);});
});

Вы также можете попробовать повторить ту же функциональность, но с помощью CSS3: 

#lol
{
   opacity:1;
}
#lol:hover
{
   transition: opacity:0.5;
   -moz-transition: opacity:0.5; /* Firefox 4 */
   -webkit-transition: opacity:0.5; /* Safari and Chrome */
   -o-transition: opacity:0.5; /* Opera */
}
...