none
Animaciones CSS en JQUERY RRS feed

  • Pregunta

  • @-webkit-keyframes colorBoton{
    	from{background-color: blue ;}
    	to{background-color:red;}
    }
    .enterLogin{
    	height:30px;
    	width: 80px;
    	top: 20px;
    	left: 220px;
    }

    $(document).ready(function(){
    	$(".enterLogin").click(function(){
        	$(this).css('animation','colorBoton 3s');
    	});
    });
    
    Este es mi codigo de css y jquery. El problema es que una vez que hago click, en mi archivo html (no lo he puesto aqui porque no es necesario) se pone el css que he escrito en jquery. Entonces, se realiza la animacion que he declarado. Pero la segunda vez que hago click, no completa ninguna animacion porque el html ya tiene el codigo de la animacion. Saben como podria hacer para que cada vez que haga click haga esa animacion?
    • Editado Kasail sábado, 18 de abril de 2015 23:14
    sábado, 18 de abril de 2015 23:13

Todas las respuestas

  • Para poder repetir la animación es necesario utilizar un pequeño truco: quitar la clase de la animación y volver a añadirla provocando un redibujado del control en medio:

            @-webkit-keyframes colorBoton {
                from { background-color: blue; }
    
                to { background-color: red; }
            }
            @-moz-keyframes colorBoton {
                from { background-color: blue; }
    
                to { background-color: red; }
            }
    
            @keyframes colorBoton {
                from { background-color: blue; }
    
                to { background-color: red; }
            }
    
            .enterLogin {
                height: 30px;
                width: 80px;
                top: 20px;
                left: 220px;
            }
    
            .animate {
                -moz-animation: colorBoton 3s 1;
                -o-animation: colorBoton 3s 1;
                -webkit-animation: colorBoton 3s 1;
                animation: colorBoton 3s 1;
            }
    
            $(document).ready(function () {
                $(".enterLogin").click(function () {
                    $(this).removeClass('animate');
                    $(this).offset($(this).offset());
                    $(this).addClass('animate');
                });
            });


    domingo, 19 de abril de 2015 8:07