Una función para gobernar varios botones, y luego algunos

Tengo 7 botones. Se distribuyen sobre una imagen de fondo e interactúan con ella. Se colocan absolutamente. He creado una función jQuery para animar la altura de uno de los botones. El botón se expande hacia arriba. Compruébalo aquí: http://hdpano.no/bf/newindex.html y haga clic en el botón superior izquierdo llamado Deck 8.

Deseo que esta función maneje todos los botones, pero hay algunas variables. La línea de base de cada botón varía, y necesito restarla a medida que amplío la altura. También deseo cerrar cualquier otro botón abierto si uno hace clic en otro.

Aquí está el código jQuery:

jQuery(document).ready(function() {

$('#link8').toggle(
function()
{
  $('#deck8').animate({height: "25px",top:"202"}, 500);
},
function()
{
$('#deck8').animate({height: "150",top:"76"}, 500);

});

});

La función es bastante básica y la he despojado de todos mis intentos de que funcione con los otros botones.

preguntado el 02 de febrero de 12 a las 11:02

3 Respuestas

Esto hace lo que estás buscando. Reemplace el código en su página con esto ...

<script type="text/javascript">
    jQuery(document).ready(function() {
        $('.link').click(function() {
            var $me = $(this);
            if ($me.height() == 150) {
                $me.animate({height: "25px",top:"+=126"}, 500);
            } else {
                $(".link").each(function() {
                    if ($(this) != $me) {
                        if ($(this).height() == 150) {
                            $(this).animate({height: "25px",top:"+=126"}, 500);
                        }
                    } 
                });
                $me.animate({height: "150px",top:"-=126"}, 500);
            }
        });
    });
</script>

Puede alternar la posición con + = y - = para que use posicionamiento relativo, en lugar de posicionamiento absoluto, de modo que el código afecte a todos los divs en la página con la clase "link".

Respondido 02 Feb 12, 15:02

Acabo de hacer un cambio después de releer tu pregunta. Ahora cierra los botones abiertos cuando abre uno nuevo. - Reincorporar a Monica Cellio

Usé este código. Muchas gracias. Traté de agregar algo de animación de fondo también. $ (this) .animate ({"backgroundColor": "rgba (203, 54, 191, .4)"}, 500) Pero no funciona. ¿Algún consejo sobre eso? ¿O debería abrir un hilo nuevo? - Studiostefan

Deberías abrir un nuevo hilo para eso. Sé que a IE8 y a continuación no le gusta rgba, pero aparte de eso, debería funcionar. - Reincorporar a Monica Cellio

this en las funciones de alternancia sería el elemento en el que se hace clic.

Esto es lo que haría:

  • eliminar el <br/> etiquetas. Use margen / relleno para lograr el espaciado.

  • básicamente, desea expandir / contraer el elemento ".link" (el contenedor) para la altura del contenido <ul>.

  • utilice "+ =" o "- =" con la función de animación para agregar / eliminar automáticamente el valor especificado.

  • como tus botones comienzan se derrumbó, debe invertir las dos funciones en el conmutador

Aquí un código que es más general:

jQuery(document).ready(function() {

    // on click of any link with class ".linkContent"
    $('.linkContent').toggle(
    function() {
            // get the parent ".link" container
        var $parent = $(this).parent(),
            // get the full height of the <ul> to show/hide + the height of the link
            h = $parent.find('ul').outerHeight() + $(this).outerHeight();

        // animate using += and -= to avoid setting explicit values
        $parent.animate({ height: '+=' + h, top: '-=' + h }, 500);
    },
    function() {
        var $parent = $(this).parent(),
            h = $parent.find('ul').outerHeight() + $(this).outerHeight();
        $parent.animate({ height: '-=' + h, top: '+=' + h }, 500);
    });

});

La siguiente demostración muestra el código en acción. Es posible que tenga que modificarlo un poco para obtener la altura exacta para agregar / eliminar, pero entiende la idea:

DEMO

Respondido 02 Feb 12, 15:02

Muchas gracias. Probé con .parent, pero nunca logré que funcionara como quería. Esto se ve muy bien e intentaré implementarlo de inmediato. Entonces ganaré algo de reputación y votaré tu respuesta. :D - Studiostefan

He cambiado un poco el código: invertí las dos funciones de alternancia (cuando los botones comienzan a colapsarse) y el cálculo de la h. Compruebe el violín actualizado. - Didier Ghys

Has hecho lo que yo hice originalmente y te perdiste la parte de cerrar cualquier botón abierto cuando abres uno nuevo. - Reincorporar a Monica Cellio

Lo que quieres hacer es agregar una clase, por ejemplo .deck a cada botón, luego alternar .deck'. Inside the toggle function use$ (this) `para referirse al botón actual.

Respondido 02 Feb 12, 15:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.