Hola wenas, estoy enredando un poco con jquery y capas.
Tengo un par de ejemplos con los que estoy jugando que crean un efecto parecido:
Ejemplo 1: (subir las div.noticias con slideUp)
Código HTML:
<script>
$(document).ready(function(){
$("span.arriba").click(function () {
$("div.noticias:visible:first").slideUp(2000);
});
$("span.abajo").click(function () {
$("div.noticias:hidden:last").slideDown(2000);
});
});
</script>
<p><span class="arriba" style="cursor:pointer;">Arriba </span> | <span class="abajo" style="cursor:pointer;">Abajo</span></p>
<div id="Layer1" style="position:absolute; overflow:hidden; width:200px; height:150px; visibility: visible; left: 146px; top: 115px;">
<div class="noticias" style="background-color:#00FF00; width:200px; height:50px;">Capa 1</div>
<div class="noticias" style="background-color:#FF0000; width:200px; height:50px;">Capa 2</div>
<div class="noticias" style="background-color:#0000FF; width:200px; height:50px;">Capa 3</div>
<div class="noticias" style="background-color:#FFFF00; width:200px; height:50px;">Capa 4</div>
<div class="noticias" style="background-color:#FF9900; width:200px; height:50px;">Capa 5</div>
<div class="noticias" style="background-color:#FF00FF; width:200px; height:50px;">Capa 6</div>
</div> Ejemplo 2:(subir o bajar todas div.noticias con animate)
Código HTML:
<style type="text/css">
.arriba2 {
top:0px;
left:0px;}
.abajo2 {
top:250px;
left:0px;}
</style>
<script>
$(document).ready(function(){
$("span.arriba2").click(function () {
$("div.noticias2").animate({top: '-=50px'}, 2000);
$("div.noticias2:first").toggleClass("abajo2"); //esto no me funciona
});
$("span.abajo2").click(function () {
$("div.noticias2").animate({top: '+=50px'}, 2000);
$("div.noticias2:last").toggleClass("arriba2"); //esto no me funciona
});
});
</script>
<p><span class="arriba2" style="cursor:pointer;">Arriba </span> | <span class="abajo2" style="cursor:pointer;">Abajo</span></p>
<div id="Layer2" style="position:absolute;overflow:hidden; width:200px; height:150px;left: 621px; top: 115px;visibility: visible;">
<div class="noticias2" style="float:left;background-color:#00FF00; width:200px; height:50px;position:absolute;left:0px;top:0px;">Capa 1</div>
<div class="noticias2" style="float:left;background-color:#FF0000; width:200px; height:50px;position:absolute;left:0px;top:50px;">Capa 2</div>
<div class="noticias2" style="float:left;background-color:#0000FF; width:200px; height:50px;position:absolute;left:0px;top:100px;">Capa 3</div>
<div class="noticias2" style="float:left;background-color:#FFFF00; width:200px; height:50px;position:absolute;left:0px;top:150px;">Capa 4</div>
<div class="noticias2" style="float:left;background-color:#FF9900; width:200px; height:50px;position:absolute;left:0px;top:200px;">Capa 5</div>
<div class="noticias2" style="float:left;background-color:#FF00FF; width:200px; height:50px;position:absolute;left:0px;top:250px;">Capa 6</div>
</div> Lo que quisiera ahora es que tanto al subir como al bajar despues de la ultima vaya la primera y viceversa y hacer una especie de carrusel (creo que lo llaman).
En el segundo he intentado hacerlo con
toggleClass pero no me funciona.
Puedo hacer esto que quiero con jquery?
Y de no ser así, que tipo de javascript me recomendariais?
Salud'Os y Gracias!!!