Effetti di transzione sul contenuto

**catsniffer** · 22-05-2012, 15:44

Salve a tutti, ho un piccolo problemino con jQuery.
In pratica aproa una finestra modale con un link. Al click del link si attiva una funzione jQuery che cambia l'immagine di sfondo ed il contenuto. Ora quello che vorrei è che il contenuto entri con un fadein (e magari esca con un fadeout), ma nonostante abbiamo provato ad applicare la proprietà a tutto, non riesco ! Qualcuno può damri una mano?

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prova</title>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
		$( "#dialog" ).dialog({resizable: false, minWidth: 350,minHeight: 350, show: 'fadeIn', duration: 'slow'});
	});
	
	function f1 (){
    $("#dialog").html('Ecco il nuovo testo! ');
	$("#dialog").css('background-image', 'url(sfondo2.jpg)'); 
    }
	</script>
    

<style type="text/css">
#dialog {
	background-image: url(sondo.jpg); 
	background-repeat: no-repeat; 
}	

</style>
</head>

<body>
<div id="dialog">
Clicca qui
</div>
</body>
</html>

**Xinod** · 22-05-2012, 21:16

non puoi animare l' opacita' di un' immagine in background
ti serve operare sull' opacita' di un elemento, di cui l' immagine puo' anche esserne lo sfondo
ciao

**catsniffer** · 22-05-2012, 22:28

Quindi in pratica per ottenere l'effetto che voglio mi conviene chiudere la modale e riaprirne un'altra?
Altrimenti che alternative ci sarebbero?

**Xinod** · 23-05-2012, 13:17

scusa, credo di non aver compreso chiaramente
quanto detto circa l' immagine di sfondo vale comunque

se vuoi cambiare il contenuto di questa dialog gia' aperta portati dentro un elemento che possa essere manipolato senza toccare la struttura della dialog

<div id="dialog">
<div id="dialogContentWrapper">
<div id="dialogContent1">
Clicca qui
</div>
</div>
</div>

il nuovo contenuto puo' gia' essere in quel wrapper, o appeso solo quando necessario

codice:

	function f1 (){
		$('#dialogContentWrapper').append($('<div id="dialogContent2">Ecco il nuovo testo!</div>'))
		$('#dialogContent1').fadeOut(500)
    }

ovviamente servira' un po' di css per far apparire il nuovo contenuto sotto al vecchio prima che quest' ultimo sfumi

ciao

**catsniffer** · 29-05-2012, 11:29

Perfetto ti ringrazio. Solo che così in effetti i due testi appaiono insieme, c'è invece di far scomparire completamente il primo prima di visualizzare l'altro ?

**catsniffer** · 29-05-2012, 11:50

Scusami, ho risolto bastava mettere dei posizionamenti ai vari div. Ora ho fatto delle modifiche, e sono arrivato al punto dove i i dialaog content sono due che si alternano l'uno all'altro cambiando lo sfondo ad ogni click. il problema è che questo sfondo cambiato dinamicamente con

codice:

$("#dialogContent2").css('background-image', 'url(img2.jpg)');

fa le storie per entrare in fade.
C'è una soluzione?

Discussione: Effetti di transzione sul contenuto

Strumenti discussione

Ricerca discussione

Visualizza

Effetti di transzione sul contenuto

Permessi di invio