jQuery animato "text-shadow" proprietà css

Question

Quindi, come ho lavorato con il metodo di jQuery .animate() ho imparato che, al fine di animare il margine sinistro che avrebbe dovuto usare qualcosa di simile:

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

Che è diverso dall'utilizzo della proprietà css margin-left: 20px;

Come è possibile utilizzare la proprietà text-shadow all'interno di animate()?

Answer 1

Le transizioni CSS sono il modo migliore per questo, poiché ogni browser di uso comune che supporta text-shadow supporta anche le transizioni.

In tal caso, è sufficiente impostare le proprietà di transizione, quindi modificare lo stile con JS o cambiando la classe.

Esempio di base: http://jsfiddle.net/adZ42/1/

Maggiori informazioni retrofitting questo in jQuery: http://css3.bradshawenterprises.com/legacy/

Answer 2

Dopo aver cercato per un po 'e rendendosi conto che praticamente tutte le soluzioni là fuori sono per le vecchie versioni di jQuery ho rinunciato e ha scritto queste funzioni che per lo più fare il trucco per un 500ms dissolvenza in entrata o fuori:

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); 
     } 
    } 

Poi basta implementano con un gestore di hover JQuery come questo:

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

L'unica cosa che non mi piace di loro è che se si passa sopra l'oggetto rapidamente lampeggerà come si alterna tra le due funzioni, ma almeno li lascia sempre in uno stato finale di essere un-sbiadito.

Altri motivi non è ideale:

• non è molto intuitivo per modificare il tempo o il livello poiché è necessario pasticciare sia con il ciclo e il moltiplicatore
• E 'solo fa lineare i passaggi
• Probabilmente non è un modo molto efficiente per farlo.
• Qualsiasi controllo per il quale si desidera utilizzare queste funzioni deve avere un ID o non funzionerà.

Ma sul lato positivo, dovrebbe funzionare con ogni versione di JQuery ed è stabile.