0

el problema es el siguiente:

Tengo algunos problemas con jquery en especial con las animaciones, el problema es que al hacer click en un boton, se me ejecutan las dos animaciones, lo que estoy necesitando hacer es que al hacer click, se me ejecute la primera animacion y al volver a hacer click en el mismo boton se ejecute la otra animacion.

Este es el codigo que tengo:

$(document).ready(function(){
    $("#boton").on('click', function(){
        $("#caja").animate({
            width: '-10%'
        }, 1000);
    });
});

$(document).ready(function(){
    $(".boton").on('click', function(){
        $("#caja").animate({
            width: '20%'
        }, 1000);
    });
});

Tengo alguna forma de poder hacer esto, o simplemente tendre que buscar otra manera. Desde ya gracias.

2 respuestas 2

1

En tu caso, personalmente lo haría utilizando clases.

$(document).ready(function(){
    $("#boton").on('click', function(){
        var ancho = $(this).hasClass('class1') ? '-10%' : '20%';
        $("#caja").animate({
            width: ancho
        }, 1000);
        if($(this).hasClass('class1')){
            $(this).removeClass('class1');
        }
        else{
            $(this).addClass('class1');
        }
    });
});

Lo que hacemos basicamente es ver si tiene asignada una clase. Si la tiene le damos un ancho y si no la tiene otro. Y cada vez que se pulsa el boton agregamos o quitamos la clase.

1
  • gracias funciono,
    – Jellestad
    el 7 may. 2020 a las 12:43
1

Debería de ser suficiente con una sola función, creas una variable boleana para controlar que evento debe de ser lanzado, ej:

$(document).ready(function(){
    var controlador=true;
    $("#boton").on('click', function(){
        if(controlador){
            $("#caja").animate({
                width: '-10%'
            }, 1000);
        }else{
            $("#caja").animate({
                width: '20%'
            }, 1000);
        }
        controlador = !controlador;
    });
});

Eso debería de funcionarte, suerte...!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.