Button animation does not happen

Question

Button animation does not happen

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

When I clicked on the button it was for him to go to the left for 400ms but when I click he goes straight without the animation, he "jumps" straight to the final place without going through the rest.

CSS:

#icone-menu.icone-menu-animacao{
    left: -10px;
    position: relative;

}

JS with JQuery:

$("#btn-menu").on("click", function(){
        $('#icone-menu').toggleClass('icone-menu-animacao', 400);
    });

HTML:

<a href="#" id="btn-menu">
<img src="img/menu55.png" id="icone-menu">
</a>

New CSS:

#icone-menu{
    position: block;
     left:0;
     transition: 0.2s;   
}
#icone-menu.icone-menu-animacao{
    left: -10px;
    position: relative;
    transition: 0.2s;
}

html jquery css

asked by anonymous 20.04.2015 / 18:53

2 answers

2

Your CSS must have transition and a default state, here's an example in jsFiddle.net ; More, ,400 on line $('#icone-menu').toggleClass('icone-menu-animacao', 400); is not necessary since toggleClass only takes one argument

20.04.2015 / 19:02

Error template ruby Add the class to the Regex result in preg_replace

score 1 · Accepted Answer

CSS transitions happen due to transition property, without it the element property changes will happen "abruptly". To make any changes (as long as the transition affects these) of elements you can use this property. It controls the transition time, the type of transition, and many other things.

That way, to make an element have an animation, you can simply use jQuery to put (or take) a class that will change the properties of that element, from then on, transition will animate that change. Example:

$('#block').click(function() {
    $(this).toggleClass('mover');
});

#block {
    width:50px;
    height:50px;
    background-color:blue;
    position:relative;
    left:0;
    transition:left .5s linear;
}

#block.mover {
    left:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="block"></div>

And one detail, you used a second parameter in the toggleClass command in your question. This is not wrong, but this second parameter only works if you are using jQuery UI.