cambia l'opacità dell'immagine usando javascript

Question

come posso cambiare l'opacità delle immagini usando javascript? Creerò un effetto dissolvenza usando javascript, c'è qualche esempio? c'è qualcosa come image.opacity che può essere cambiato attraverso il codice JS? come è ambientato?

grazie

Answer 1

Supponendo che si sta utilizzando JS pianura (vedi altre risposte per jQuery), di modificare l'opacità di un elemento, scrive:

var element = document.getElementById('id'); 
element.style.opacity = "0.9"; 
element.style.filter = 'alpha(opacity=90)'; // IE fallback 

Answer 2

Si potrebbe usare del animate o fadeTo jQuery.

Answer 3

Non sono sicuro che sia possibile farlo in tutti i browser, ma è possibile impostare la proprietà css dell'img specificata.
Prova a lavorare con jQuery che ti consente di apportare modifiche css in modo molto più rapido ed efficiente.
in jQuery avrai le opzioni per usare .animate(),.fadeTo(),.fadeIn(),.hide("slow"),.show("slow") per esempio.
Voglio dire questo frammento CSS dovrebbe fare il lavoro per voi:

img 
{ 
opacity:0.4; 
filter:alpha(opacity=40); /* For IE8 and earlier */ 
} 

controllare anche questo sito dove tutto è ulteriormente spiegato:
http://www.w3schools.com/css/css_image_transparency.asp

Answer 4

È possibile utilizzare i CSS per impostare l'opacità, e che l'uso javascript per applicare gli stili a un determinato elemento nel DOM.

.opClass { 
    opacity:0.4; 
    filter:alpha(opacity=40); /* For IE8 and earlier */ 
} 

Than utilizzare (per esempio) jQuery per modificare lo stile:

$('#element_id').addClass('opClass'); 

O con javascript pianura, in questo modo:

document.getElementById("element_id").className = "opClass"; 

Answer 5

si potrebbe usare Jquery davvero o semplice buon vecchio javascript:

var opacityPercent=30; 
document.getElementById("id").style.cssText="opacity:0."+opacityPercent+"; filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity="+opacityPercent+");"; 

Hai messo questo in una funzione che si chiama su un setTimeout fino a quando l'opacità desiderata viene raggiunta

Answer 6

Infatti, è necessario utilizzare i CSS.
document.getElementById("myDivId").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");

Funziona su FireFox, Chrome e IE.

Answer 7

Prima impostare l'opacità in modo esplicito nel codice HTML così:

<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px; opacity:1"></div> 

altrimenti è 0 o null

questo è poi il mio file .js

document.getElementById("fadeButton90").addEventListener("click", function(){ 
document.getElementById("box").style.opacity = document.getElementById("box").style.opacity*0.90; });