jQuery的動畫「文字陰影」 CSS屬性

因此，正如我已經與jQuery的.animate()方法工作，我已經學會了以動畫左旁你將不得不使用這樣的事情：jQuery的動畫「文字陰影」 CSS屬性

$('#thing').animate({marginLeft: 20}, 1000);

這與使用css屬性不同margin-left: 20px;

我怎麼能使用animate()裏面的text-shadow屬性？

來源

2011-12-20 sirmdawg

看這裏：http://stackoverflow.com/questions/2226906/animating-elements-of-text-shadow-with-jquery – 2011-12-20 16:47:18

CSS轉換是最好的方式，因爲每個支持文本陰影的常用瀏覽器也支持轉換。

在這種情況下，您只需設置轉換屬性，然後使用JS或通過更改類來更改樣式。

基本例如：在改進此爲jQuery的http://jsfiddle.net/adZ42/1/

來源

2011-12-20 19:44:12

你知道嗎，但基本上我正在尋找的確切效果：P 。幻燈片和模糊;） – sirmdawg 2011-12-20 19:55:50

是否有可能使用這個「不透明」以及？ – sirmdawg 2011-12-20 20:01:33

幾乎可以將它用於每個屬性：http://www.w3.org/TR/css3-transitions/#animatable-properties- – 2011-12-20 20:27:17

東張西望了一會兒，並在那裏是老版本的jQuery認識到，幾乎所有的解決方案，我放棄了，寫這些函數主要做的伎倆爲500ms的淡入或淡出：

function AddShadow(ControlID) 
    { 
     for (i = 0; i < 11; i++) 
     { 
      setTimeout('$("#' + ControlID + '").css("text-shadow", "0 0 ' + i + 'px White");', i * 50); 
     } 
    } 

    function RemoveShadow(ControlID) 
    { 
     for (i = 0; i < 11; i++) 
     { 
      setTimeout('$("#' + ControlID + '").css("text-shadow", "0 0 ' + (10 - i) + 'px White");', i * 50); 
     } 
    }

然後你只需像這樣一個jQuery的懸停處理程序實現：

$('.class').hover(function() {AddShadow($(this).attr('id'))}, function() {RemoveShadow($(this).attr('id'))};

我不喜歡他們的唯一的事情是，如果你將鼠標懸停在對象很快就會出現閃爍現象，因爲它的兩個功能之間交替，但至少它總是讓他們的是一個最終狀態未褪。

其他原因，它的效果並不理想：

這不是很直觀，因爲你必須用循環和乘數都亂來改變時間或水平
它不僅線性步驟
這可能不是一個非常有效的方式。
任何想要使用這些功能的控件都必須有一個ID或它不起作用。

但是好的一面，它應該適用於每個JQuery版本，並且它很穩定。

來源

2018-02-28 22:50:45 Jrud

jQuery的動畫「文字陰影」 CSS屬性

回答

相關問題