css3 - Transition works half way: the ugly jump -

css3 - Transition works half way: the ugly jump -

i'm trying "transition" work correctly when add together , remove class have not succeeded.

here's i've done, think help understand problem better:

http://jsfiddle.net/88mzjnec/9/

css code:

.navbar-brand > img{ max-height: 70px; height:70px; margin-top: -28px; -webkit-transition: max-height 0.5s, width 0.5s, margin-top 0.5s; -moz-transition: max-height 0.5s, width 0.5s, margin-top 0.5s; -o-transition: max-height 0.5s, width 0.5s, margin-top 0.5s; transition: max-height 0.5s, width 0.5s, margin-top 0.5s; }

html code:

<div id="primary" class="ancho"> <a class="navbar-brand" href="http://www.imagenestotal.com/perrito/perrito-4.jpg"> <img src="http://www.imagenestotal.com/perrito/perrito-4.jpg" height="70" title="bla bla bla" rel="home"></a> </div> <button onclick="removeadd()">add/remove class</button><div id="result"></div>

javascript code:

var add together = true; var result = document.getelementbyid("result"); function removeadd(){ if(add){ $("#primary").removeclass("ancho"); add together = false; result.innertext = "¡oh, no! ugly jump."; }else{ $("#primary").addclass("ancho"); add together = true; result.innertext = "all ok"; } }

if take , throw light, i'd appreciate it...

thanks,

in css transitions, alter references 'width' 'height', that's you're animating.

that solves main problem. suggest few coding changes: 1. removing max-height lines (as don't since you've fixed height), 2. since you're using jquery in 1 line, utilize in other lines applicable simplify things (you can utilize prepare broken "result" too), 3. remove 'onclick' attribute html , apply via js, js handled js, maintain scripting separate content , making things easier maintain.

js:

function removeadd(){ if($("#primary").hasclass("ancho")){ $("#primary").removeclass("ancho"); $("#result").text("¡oh, no! ugly jump."); } else { $("#primary").addclass("ancho"); $("#result").text("all ok"); } } $(document).ready(function(){ $('#btn').click(removeadd); });

css:

.navbar-brand > img { height: 70px; margin-top: -28px; -webkit-transition: height 0.5s, margin-top 0.5s; -moz-transition: height 0.5s, margin-top 0.5s; -o-transition: height 0.5s, margin-top 0.5s; transition: height 0.5s, margin-top 0.5s; } .ancho .navbar-brand img { height: 80px; margin-top: -33px; } #result{ margin-top:20px; }

html:

<div id="primary" class="ancho"> <a class="navbar-brand " href="http://www.imagenestotal.com/perrito/perrito-4.jpg"> <img src="http://www.imagenestotal.com/perrito/perrito-4.jpg" height="70" title="bla bla bla" rel="home" /> </a> </div> <button id="btn">add/remove class</button> <div id="result"></div>

see in action here: http://jsfiddle.net/88mzjnec/12/

css3 css-transitions