Foros del Web » Programando para Internet » Jquery »

accordion con jquery

Estas en el tema de accordion con jquery en el foro de Jquery en Foros del Web. Hola a todo el mundo. No estoy seguro de que este hilo este aquí bien colocado, pero si no es así ruego que me disculpéis, ...
  #1 (permalink)  
Antiguo 01/12/2010, 02:25
 
Fecha de Ingreso: diciembre-2010
Ubicación: A Coruña, Galicia
Mensajes: 4
Antigüedad: 9 años, 1 mes
Puntos: 0
accordion con jquery

Hola a todo el mundo.

No estoy seguro de que este hilo este aquí bien colocado, pero si no es así ruego que me disculpéis, y que un administrador lo mueva a donde corresponda.

Estoy intentando hacer un efecto acordeón para un menú que debe ser visual en vez de ser de texto y me he topado con el siguiente ejemplo que se adapta bastante a lo que yo necesito: http://tympanus.net/Tutorials/ElegantAccordion/.
El caso es que lo que yo necesito es que el tamaño del acordeon, todo expandido, sea de 900px, es decir, que no supere ese ancho, cosa que este ejemplo hace.
Copio ahora el código de jquery y comento lo que se me ocurrió:

Código:
<script type="text/javascript">
$(function() {
    $('#accordion > li').hover(
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'480px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        },
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'115px'},1000);
            $('.heading',$this).stop(true,true).fadeIn();
            $('.description',$this).stop(true,true).fadeOut(500);
            $('.bgDescription',$this).stop(true,true).slideUp(700);
        }
    );
});
</script>
Se me ocurre la siguiente solución, sobre el papel sencilla, pero que no consigo programar: empezar con la primera pestaña ya abierta, y el resto cerrada, y al hacer hover sobre el <li>, hacer la que esta desplegada pequeña(o todas las pestañas), y ampliar la pestaña sobre la que ya estoy.
Muchas gracias por la atención y espero poder a partir de ahora, ya que este es mi primer mensaje, colaborar para ayudar a cualquiera que lo necesite.

Un saludo
  #2 (permalink)  
Antiguo 01/12/2010, 02:47
 
Fecha de Ingreso: diciembre-2010
Ubicación: A Coruña, Galicia
Mensajes: 4
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: accordion con jquery

Acabo de hacer la siguiente corrección en el código:

Código:
<script type="text/javascript">
$(function() {
    $('#accordion > li').hover(
        function () {
            var $this = $(this);
			$this.siblings().stop().animate({'width':'115px'},1000);
			$('.heading',$this.siblings()).stop(true,true).fadeIn();
            $('.description',$this.siblings()).stop(true,true).fadeOut(500);
            $('.bgDescription',$this.siblings()).stop(true,true).slideUp(700);
			$this.stop().animate({'width':'480px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        },
        function () {
            //var $this = $(this);
            //$this.stop().animate({'width':'115px'},1000);
            //$('.heading',$this).stop(true,true).fadeIn();
            //$('.description',$this).stop(true,true).fadeOut(500);
            //$('.bgDescription',$this).stop(true,true).slideUp(700);
        }
    );
});
</script>
Antes de hacer más grande el li correspondiente, hago los otros más pequeños. pero no funciona. Se siguen admitiendo ideas
  #3 (permalink)  
Antiguo 01/12/2010, 03:02
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.596
Antigüedad: 17 años, 9 meses
Puntos: 1279
Tema movido desde javascript
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 01/12/2010, 03:21
 
Fecha de Ingreso: diciembre-2010
Ubicación: A Coruña, Galicia
Mensajes: 4
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: accordion con jquery

Caricatos, perdona por equivocarme de sitio. No volverá a pasar

Etiquetas: javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:41.