Div show/hide con effetto fade

**iJailDev** · 11-06-2011, 16:42

ciao a tutti !

sapete dirmi come fare a far comparire/nascondere un div con un effetto a dissolvenza ?

Ovvero premendo un pulsante nel menù compare il div, e premendo una freccina posta in alto lo chiudo ...

Sapete aiutarmi ?

Grazie

**Mattia Vio** · 12-06-2011, 03:47

è giusto ma ho sonno quindi magari ridacci un occhio

sul pulsante nel menù ci metti onClick="fade_in(nomediv)"
sulla freccina posta in alto ci metti onClick="fade_out(nomediv)"

js :

function fade_in(nomediv){
$('#'+nomediv).fadeIn("slow");
}

function fade_out(nomediv){
$('#'+nomediv).fadeOut("slow");
}

notte

**iJailDev** · 12-06-2011, 13:56

Grazie per l'aiuto !!!

Non so perchè ma non funziona ...

Nell'header ho messo:

codice:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js"></script>
<script type="text/javascript">

function fade_in(.mail-block){
$('#'mail-block).fadeIn("slow");
}

function fade_out(mail-block){
$('#'mail-block).fadeOut("slow");
}

</script>

mentre nel body:

codice:

[img]close.png[/img]

la X per chiudere;

codice:

MAIL il bottone per aprire

dove sbaglio ???

**cavicchiandrea** · 12-06-2011, 14:48

Ci sono diversi errori, comunque usa fadeToogle

**iJailDev** · 12-06-2011, 15:05

Grazie 1000 !!!

Potresti aiutarmi ?! Purtroppo ancora non sono molto pratico di Js ...

Ecco cosa ho nel body ...

codice:

    <div id="blocco">blocco che deve scomparire</div>
    
	<div id="info">
		<span class="logo">ANDREA GERMANA'</span>
		TWITTER 
		FACEBOOK 
		MAIL
	</div>

premendo il tasto MAIL deve comparire il div chiamato blocco

Grazie ancora

**cavicchiandrea** · 12-06-2011, 16:21

codice:

<head>
<script type="text/javascript">

$(function(){
$("#mail").bind('click', function(){
    $("#blocco").fadeTogle(300);
});
});

</script>
</head>

**iJailDev** · 12-06-2011, 16:51

Niente non funziona !! <Copiato esattamente !! :////

ti do tutto il sorgente della pagina, forse sbaglio qualcos'altro ...

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>Andrea Germanà - Html Dev</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js"></script>

<script type="text/javascript">

$(function(){
$("#mail").bind('click', function(){
    $("#blocco").fadeTogle(300);
});
});

</script>


<style type="text/css">

html { margin-top: 0 !important; -webkit-font-smoothing: antialiased; }

body {
  background-image: url(bg.jpg);
  padding: 0;
  margin: 0;
}


#info {
    text-align: center;
    margin-top: 70px;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
}

.logo {
	font-family: "myriad pro" ;
	font-size: 36px;
	font-weight: normal;
	color: #333;
}

.menu {
	font-family: "Helvetica Neue", Helvetica, Arial;
	font-size: 36px;
	font-style: normal;
	font-weight: bold;
	margin-left: 10px;
	font-variant: normal;
}

a:link, a:visited {
	text-decoration: none;
	color: #333;
	-webkit-transition: color .5s linear;
}

a:hover, a:active {
	color: white;
}

#blocco {
	width: 900px;
	height: 400px;
	margin: 0 auto;
	margin-top: 30px;
	background-color: black;
}

</style>

</head>

<body>    

    
    <div id="blocco">blocco che deve scomparire</div>
    
	<div id="info">
		<span class="logo">ANDREA GERMANA'</span>
		TWITTER 
		FACEBOOK 
		MAIL
	</div>
	

</body>

</html>

**cavicchiandrea** · 12-06-2011, 17:00

cambia questo $("#mail") con questo $(".menu")

**iJailDev** · 12-06-2011, 17:10

niente !!! non vuole funzionare !!

altra cosa, mi sono dimenticato di aggiungere ul altro pulsante, che chiamerò WORKS ...

quindi quello MAIL apre un blocco con un form mail, mentre il pulsante WORKS aprirà un altro blocco con le mie creazioni ....

Ti ringrazio mille dell'aiuto, ma non vuole funzionare !!!

**cavicchiandrea** · 12-06-2011, 18:52

codice:

$(function(){
$("#mail").bind('click', function(){
    $("#blocco").fadeToggle(300);
});
$("#works).bind('click', function(){
    $("#blocco_works").fadeToggle(300);
});
});

<div id="blocco">blocco che deve scomparire</div>
<div id="blocco_works">blocco che deve scomparire</div>
<div id="info">
<span class="logo">ANDREA GERMANA'</span>
TWITTER
FACEBOOK
WORKS
MAIL
</div>

Discussione: Div show/hide con effetto fade

Strumenti discussione

Ricerca discussione

Visualizza

Div show/hide con effetto fade

Permessi di invio