[jQuery] Div fadeIn - fadeOut (es. notifiche facebook)

**KingWoody** · 23-08-2012, 16:59

Ciao ragazzi,
ho un problema con il seguente codice:

codice:

var stampa = '<div id="content">' + msg + '</div>' ;
$(stampa).insertAfter('#profilo').fadeIn('slow');
$('#content').sleep(1000);
$('#content').fadeOut('slow');
$('#content').remove();

Stavo cercando di fare una cosa analoga alle notifiche di Facebook: il div compare, resta qualche secondo, e poi scompare.
Fino alla comparsa va tutto bene, l'unico problema è che poi non funziona il fadeOut: non scompare.

Avete qualche idea di quale potrebbe essere il problema?
Grazie!

**cavicchiandrea** · 23-08-2012, 17:19

Io questo sleep(tempo) nelle doc di jquery non lo trovo sicuro che esista?

**KingWoody** · 23-08-2012, 17:23

L'ho letto da qualche parte, comunque sia usando

codice:

delay()

neanche si visualizza il div :/

**cavicchiandrea** · 23-08-2012, 17:30

Per tagliare la testa al toro potresti fare cosi:

codice:

var stampa = '<div id="content">' + msg + '</div>' ;
$(stampa).insertAfter('#profilo').fadeIn('slow');
setTimeout(function(){
$('#content').fadeOut('slow').remove()},1000)

**KingWoody** · 23-08-2012, 17:36

Certo così funziona: compare e dopo un secondo scompare. L'unico problema è che fa il tutto senza il fadeIn e fadeOut quindi senza una graduale comparsa/scomparsa :/

**cavicchiandrea** · 23-08-2012, 17:42

Prova cosi

codice:

var stampa = '<div id="content">' + msg + '</div>' ;
$(stampa).insertAfter('#profilo')
$('#content').fadeIn('slow', function(){
setTimeout(function(){
$('#content').fadeOut('slow').remove()},1000)
});

il css #content è comunque impostato su display:none giusto?

**KingWoody** · 23-08-2012, 17:55

Ho provato con il codice che hai postato ma con quello non funziona proprio nulla :/
Il display era impostato su block ora l'ho impostato su none e il fadeIn si nota. Del fadeOut ancora nessuna traccia però.. :/

**cavicchiandrea** · 23-08-2012, 18:31

dopo qualche prova cosi funziona:

codice:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
function attiva(){
var stampa = '<div id="content">ciao mondo</div>' ;
$('#profilo').append(stampa)
$('#content').fadeIn(700).delay(1000).fadeOut(700, function(){$(this).delay(1000).remove()})
}
</script>
<style type="text/css">
body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #000;
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	background-color: #Fafafa;
}
html{width:100%; height:100%;}
#content{
	height: 500px;
	width: 500px;
	border: 1px solid #000;
	display:none;
	margin-right: auto;
	margin-left: auto;
}
#profilo{
	width:910px;
	height:610px;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFF;
}
</style>
<title>Untitled Document</title>
</head>
<div id="profilo"></div>
<input name="fade" type="button" onClick="attiva()" value="mostra div">
<body>
</body>
</html>

**KingWoody** · 23-08-2012, 19:00

Yep, right così funziona! Grazie ^^

Discussione: [jQuery] Div fadeIn - fadeOut (es. notifiche facebook)

Strumenti discussione

Ricerca discussione

Visualizza

[jQuery] Div fadeIn - fadeOut (es. notifiche facebook)

Permessi di invio