Qualcuno può aiutarmi a creare un effetto fadeIn fadeOut utilizzando JQuery?
Praticamente ho un menu del tipo:
Button1 - Button2 - Button3
Dovrei fare in modo che quando apro la pagina, La pagina relativa a "Button1" dev'essere già aperta. Mentre quando clicco "Button2" deve sparire con trasparenza la pagina attualmente aperta e aprirsi il contenuto del div relativo a Button2, la stessa cosa per gli altri pulsanti.
Con i sogni possiamo conoscere il futuro...
posta anche la porzione di codice html così si può scrivere la parte in js in modo più adatto
Ubuntu rulez!! :P
Ho fatto una cosa del genere, però non è proprio quello che voglio, poichè all'inizio vedo tutti i contenuti, ma in realtà dovrei vedere solamente quello della pagina1. e dopo gestire gli effetti come dicevo nel primo postcodice:<!DOCTYPE html> <html> <head> <style> .content { height:80px; width:80px; background:#090; } #log { clear:left; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div> <ul> <li id="btn1">BUTTON1 <li id="btn2">BUTTON2[/list] </div> <div id="page1">CONTENUTO PAGINA 1</div> <div id="page2">CONTENUTO PAGINA 2</div> <script> $('#btn1').click(function() { $('#page2').fadeOut('slow', function() { $('#page1').fadeIn('slow', function() { }); }); }); $('#btn2').click(function() { $('#page1').fadeOut('slow', function() { $('#page2').fadeIn('slow', function() { }); }); }); </script> </body> </html>
Con i sogni possiamo conoscere il futuro...
allora intanto direi che è meglio svincolarsi da id fissi sui pulsanti e sui div di riferimento e usiamo l'ordine dei vari pulsanti e pagine di riferimento
diciamo così
Codice PHP:
<style>
#my-pages .page{ display:none; } /*le nascondiamo tutte inizialmente*/
</style>
<div id="my-buttons">
<ul>[*]button 1[*]button 2[*]button 3[*]button 4[/list]
</div>
<div id="my-pages">
<div class="page">contenuto pagina 1</div>
<div class="page">contenuto pagina 2</div>
<div class="page">contenuto pagina 3</div>
<div class="page">contenuto pagina 4</div>
</div>
<script type="text/javascript">
$('#my-pages .page:eq(0)').fadeIn();
// gestisci il click sui vari bottoni
$('#my-buttons li').click(function(){
var i = $(this).index(); // in questa variabile ci sarà l'indice del bottone in cui si è cliccato
$('#my-pages .page').fadeOut(function(){
$('#my-pages .page:eq('+i+')').fadeIn(); //e mostri quello del pulsante corrispondente
}); //nascondi tutti
});
</script>
Ubuntu rulez!! :P
Permessi di invio
Rispondi quotando