Estoy trabajando con unos tabs, pero al pasar de uno al otro el contenido hace una transición simple.
Me gustaría que cuando se cambia de tab, el contenido del siguiente aparezca encima de la otra con un efecto de slideUp.
Estuve intentando con varios métodos y tutoriales, pero todavía no pude dar en la tecla... así que humildemente vengo a pedir socorro.
Ésto es lo que tengo:
Código:
<style type="text/css">
#Container {
position: absolute;
top: 135px;
left: 80px;
width: 530px;
height: 315px;
z-index:1;
border: 0px;
}
#tragos, #whiskys, #tequilas, #frozen, #cocktails, #espumantes {
position: absolute;
margin: 0px;
left: 0px;
overflow: hidden;
width: 490px;
height: 315px;
display: none;
border: 1px;
}
#tragos {display: block;}
p {
margin: 0; padding: 0px;
}
#Navigation { position: absolute; top: 105px; left: 76px;}
#Navigation a { margin: 0; padding: 0; height: 15px; width: 60px; font-size: 10px; text-decoration: none; display: block; float: left;
background-image: url(img/tab-bar1.png); background-repeat: no-repeat; background-position: 0 -15px; }
#Navigation a:hover { margin-top: 0px; height: 15px; background-image: url(img/tab-bar1.png); background-repeat: no-repeat;
background-position: 0 0px; }
#Navigation a.current { margin-top: 0px; height: 15px; background-image: url(img/tab-bar1.png); background-repeat: no-repeat;
background-position: 0px 0px; }
#Navigation2 { position: absolute; top: 105px; left: 142px;}
#Navigation2 a { margin: 0; padding: 0; height: 15px; width: 77px; font-size: 10px; text-decoration: none; display: block; float: left;
background-image: url(img/tab-bar2.png); background-repeat: no-repeat; background-position: 0 -15px; }
#Navigation2 a:hover { margin-top: 0px; height: 15px; background-image: url(img/tab-bar2.png); background-repeat: no-repeat;
background-position: 0 0px; }
#Navigation2 a.current { margin-top: 0px; height: 15px; background-image: url(img/tab-bar2.png); background-repeat: no-repeat;
background-position: 0px 0px; }
#Navigation3 { position: absolute; top: 105px; left: 219px;}
#Navigation3 a { margin: 0; padding: 0; height: 15px; width: 81px; font-size: 10px; text-decoration: none; display: block; float: left;
background-image: url(img/tab-bar3.png); background-repeat: no-repeat; background-position: 0 -15px; }
#Navigation3 a:hover { margin-top: 0px; height: 15px; background-image: url(img/tab-bar3.png); background-repeat: no-repeat;
background-position: 0 0px; }
#Navigation3 a.current { margin-top: 0px; height: 15px; background-image: url(img/tab-bar3.png); background-repeat: no-repeat;
background-position: 0px 0px; }
#Navigation4 { position: absolute; top: 105px; left: 300px;}
#Navigation4 a { margin: 0; padding: 0; height: 15px; width: 70px; font-size: 10px; text-decoration: none; display: block; float: left;
background-image: url(img/tab-bar4.png); background-repeat: no-repeat; background-position: 0 -15px; }
#Navigation4 a:hover { margin-top: 0px; height: 15px; background-image: url(img/tab-bar4.png); background-repeat: no-repeat;
background-position: 0 0px; }
#Navigation4 a.current { margin-top: 0px; height: 15px; background-image: url(img/tab-bar4.png); background-repeat: no-repeat;
background-position: 0px 0px; }
#Navigation5 { position: absolute; top: 105px; left: 370px;}
#Navigation5 a { margin: 0; padding: 0; height: 15px; width: 91px; font-size: 10px; text-decoration: none; display: block; float: left;
background-image: url(img/tab-bar5.png); background-repeat: no-repeat; background-position: 0 -15px; }
#Navigation5 a:hover { margin-top: 0px; height: 15px; background-image: url(img/tab-bar5.png); background-repeat: no-repeat;
background-position: 0 0px; }
#Navigation5 a.current { margin-top: 0px; height: 15px; background-image: url(img/tab-bar5.png); background-repeat: no-repeat;
background-position: 0px 0px; }
#Navigation6 { position: absolute; top: 105px; left: 461px;}
#Navigation6 a { margin: 0; padding: 0; height: 15px; width: 101px; font-size: 10px; text-decoration: none; display: block;
float: left; background-image: url(img/tab-bar6.png); background-repeat: no-repeat; background-position: 0 -15px; }
#Navigation6 a:hover { margin-top: 0px; height: 15px; background-image: url(img/tab-bar6.png); background-repeat: no-repeat;
background-position: 0 0px; }
#Navigation6 a.current { margin-top: 0px; height: 15px; background-image: url(img/tab-bar6.png); background-repeat: no-repeat;
background-position: 0px 0px; }
</style>
Código:
<!-- SHOW NAVIGATION TABS -->
<div id="Navigation"><a href="#" onClick="return swapIt(this)" title="tragos" class="current"></a></div>
<div id="Navigation2"><a href="#" onClick="return swapIt(this)" title="whiskys"></a></div>
<div id="Navigation3"><a href="#" onClick="return swapIt(this)" title="tequilas"></a></div>
<div id="Navigation4"><a href="#" onClick="return swapIt(this)" title="frozen"></a></div>
<div id="Navigation5"><a href="#" onClick="return swapIt(this)" title="cocktails"></a></div>
<div id="Navigation6"><a href="#" onClick="return swapIt(this)" title="espumantes"></a></div>
<!-- SHOW CONTENT CONTAINER -->
<div id="Container">
<div id="tragos">
<div class="Scroller-Container">
<img src="img/tragos.png">
</div>
</div>
<div id="whiskys">
<div class="Scroller-Container">
<img src="img/whiskys.png">
</div>
</div>
<div id="tequilas">
<div class="Scroller-Container">
<img src="img/tequilas.png">
</div>
</div>
<div id="frozen">
<div class="Scroller-Container">
<img src="img/frozen.png">
</div>
</div>
<div id="cocktails">
<div class="Scroller-Container">
<img src="img/cocktails.png">
</div>
</div>
<div id="espumantes">
<div class="Scroller-Container">
<img src="img/espumantes.png">
</div>
</div>
</div>
Había pensado usar un script como éste (que produce [URL="http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html"]éste resultado[/URL]) pero no se si me servirá para mis propósitos..
Código:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
outline: none;
}
#panel {
background: #754c24;
height: 200px;
display: none;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #422410;
background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
background: url(images/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>
</head>
<body>
<div id="panel">
<!-- you can put content here -->
</div>
<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
Un millón de gracias por adelantado!!