固定文本越來越怪異時，對鉻jQuery的動畫淡出

的JavaScript固定文本越來越怪異時，對鉻jQuery的動畫淡出

$(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中，文本在淡入淡出時變得很奇怪 - 看起來文本正在丟失明文類型。

我該如何解決？

如何，它看起來與衰落：Click to see

解決方案： -khtml設置不透明度：0.99;並在mouseleave上設置爲0.99。 Safari和鉻將工作正常:)

來源

2012-03-31 Robson Silveira

你不能解決它是開心，但你有選擇。

集webkit的背面隱藏（下同十歲上下，我也覺得這個修正了許多的webkit顯示錯誤）http://jsfiddle.net/FSkXL/
設置元素到0.9，而不是1。這將防止從文本改變（更一致），通過保持其「怪異」 http://jsfiddle.net/7YNhM/
你可以使用圖片代替文字，PNG或SVG，這意味着文本不會成爲可編輯webtext
canvas標籤，噸的額外的複雜性

這是Chrome瀏覽器如何呈現文本的基本組成部分，而且只是沒有它周圍的清潔方式。

來源

2012-03-31 23:24:35 Fresheyeball

我的客戶對選項1至今都非常滿意。 – Fresheyeball 2012-03-31 23:25:40

我有一個問題：'將webkit背面設置爲隱藏'，我沒有看到任何改變。 – 2012-04-01 00:41:35

檢查小提琴。如果沒有它，淡出之前的文本是'更大膽'。然後當淡出發生時，它不像大膽。在問題中，這兩種狀態下的文本都不是粗體。 – Fresheyeball 2012-04-01 19:12:36

它適用於我：文本不會改變。其他人可以通過查看jsFiddle來證實。

但我以前遇到過這個bug。有了動畫，我發現，Chrome有時會模糊或變形文字（也與CSS3轉換一起）。我認爲這是關於你的硬件加速和圖形設置。

正如指出的在this post其他用戶，Chrome瀏覽器似乎與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 */ 
}

來源

2012-03-31 22:55:00 hohner

我會試試看，謝謝。 – 2012-03-31 23:09:28

它沒有工作，相同的結果;/ – 2012-03-31 23:11:21

嘗試使用CSS3轉換，我已經更新我的解決方案與示例CSS – hohner 2012-03-31 23:15:14

固定文本越來越怪異時，對鉻jQuery的動畫淡出

回答

相關問題