[JQUERY] Ritardo a .attr

**E.C.Web** · 13-05-2012, 17:38

Salve ragazzi, ho uno script piccolissimo che mi fà il cambio di immagine al passaggio del mouse:

codice:

$("#bottone_3").hover(
      function(){
       $("#Immagine").attr("src","../Immagini/Bottoni/bottone_mouseover.png")
      }, function(){
       $("#Immagine").attr("src","../Immagini/Bottoni/bottone_mouseout.png")
	   });

Il codice và che è una meraviglia, soltanto io vorrei aggiungere un effetto "fadein" al cambio. Questo perchè la prima immagine è in bianco e nero e l'altra è a colori, quindi vorrei raggiungere l'effetto di "colorazione graduale".

**cavicchiandrea** · 13-05-2012, 17:55

prova cosi:

codice:

$("#bottone_3").hover(
      function(){
       $("#Immagine").fadeOut(200).attr("src","../Immagini/Bottoni/bottone_mouseover.png").fadeIn(200)
      }, function(){
       $("#Immagine").fadeOut(200).attr("src","../Immagini/Bottoni/bottone_mouseout.png").fadeIn(200)
	   });

**E.C.Web** · 13-05-2012, 19:18

Niente, intanto grazie mille per la risposta

Su questo link puoi vedere il risultato:
Link

In pratica mi sparisce

**cavicchiandrea** · 13-05-2012, 19:37

neanche ricopiare

tu l'hai modificato cosi:
$(this).fadeOut(3000).attr("src","../Immagini/Bottoni/bottone_mouseover.png")
io t'ho detto di fare cosi:
$("#Immagine").fadeOut(200).attr("src","../Immagini/Bottoni/bottone_mouseover.png").fadeIn(200)
Poi credo che 3 secondi di fade sia un po troppi ma se ti piace lento

**E.C.Web** · 13-05-2012, 19:55

Scusami avevo scritto il codice invece che copiarlo xD e ho dimenticato il fade in. Comunque guarda tu stesso il risultato al link di prima.

Scompare e ricompare :/

**cavicchiandrea** · 13-05-2012, 20:37

prova cosi:

codice:

$("#bottone_3").live({
      mouseover : function(){
       $("#Immagine").fadeToggle("slow", "linear", function(){
$(this).attr("src","../Immagini/Bottoni/bottone_mouseover.png").fadeIn(200)
})
      }
     mouseout : function(){
       $("#Immagine").fadeToggle("slow", "linear", function(){
$(this).attr("src","../Immagini/Bottoni/bottone_mouseout.png").fadeIn(200)
})
}
	   });

**E.C.Web** · 13-05-2012, 21:40

Dreamweaver mi dà un errore ....mh e infatti non mi parte il codice!

**cavicchiandrea** · 13-05-2012, 21:50

aggiungi la virgola prima di mouseout },

**E.C.Web** · 13-05-2012, 22:08

Fatto ma non parte xD

**carlomarx** · 13-05-2012, 22:22

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">

window.onload = function() {
	var bIsOver = false, nOpacity = 0, nAnimation = -1, oColorImg = new Image(), oBWImg = document.querySelector("#bottone_3");

	function fadeInOut () {
		oColorImg.style.opacity = nOpacity / 5;
		if (bIsOver ? nOpacity > 3 : nOpacity < 1) { clearInterval(nAnimation); } else { bIsOver ? nOpacity++ : nOpacity--; }
	}

	function mouseChange () {
		bIsOver = !bIsOver;
		clearInterval(nAnimation);
		nAnimation = setInterval(fadeInOut, 100);
	}

	oColorImg.src = "bottone_mouseover.png";
	oColorImg.style.position = "absolute";
	oColorImg.style.left = oBWImg.offsetLeft + "px";
	oColorImg.style.top = oBWImg.offsetTop + "px";
	oColorImg.style.opacity = "0";
	oColorImg.onmouseover = oColorImg.onmouseout = mouseChange;

	oBWImg.onmouseover = function () {
		oBWImg.onmouseover = null;
		oBWImg.parentNode.appendChild(oColorImg);
	};
};

</script>
</head>

<body>


Lorem ipsum [img]bottone_mouseout.png[/img] dolor sit amet</p>
</body>
</html>

Discussione: [JQUERY] Ritardo a .attr

Strumenti discussione

Ricerca discussione

Visualizza

[JQUERY] Ritardo a .attr

Permessi di invio