javascript - Issue with CSS transitions in Chrome, Firefox and Opera, but not IE -

javascript - Issue with CSS transitions in Chrome, Firefox and Opera, but not IE -

in web application, want animate switching between 2 elements. old element should disappear sliding off left , fading out @ same time, after new element appears sliding in right while fading in.

please see fiddle: http://jsfiddle.net/mtkaz/8/

i trying utilize css transitions animation. works fine on first iteration, 1 time element has been hidden once, transition appearing element stops working: appearing element snaps in, without motion or fading.

i experiencing problem in chrome, opera next , firefox, not in ie10. doing wrong or bug in browsers ie (a bizarre notion)?

the issue seems related show()/hide(), since there no problem if set elements position: absolute , remove show()/hide() calls.

javascript:

var currentdiv = "div2"; $(function(){ $('#btn').click(function(){ var newdiv = currentdiv == 'div1' ? 'div2' : 'div1'; var olddiv = currentdiv; // start transition disappearing div $('#' + olddiv).css({ opacity: 0, left: -100 }); // prepare new div showing first moving right // there transition here well, won't visible $('#' + newdiv).css({ opacity: 0, left: +100 }); settimeout(function(){ // 1 time transition done, hide div doesn't occupy space $('#' + olddiv).hide(); // show new div , start appearing transition $('#' + newdiv).show().css({ opacity: 1, left: 0 }); }, 1000); currentdiv = newdiv; }); });

css:

.mydiv { position:relative; transition: left 1s, opacity 1s; width: 200px; }

html:

<div id="div1" class="mydiv" style="display:none"> hello, text </div> <div id="div2" class="mydiv" style="display:none"> , here more text </div>

there issues animating elements, start attribute display: none. wait finish callback of show() , set css properties.

$('#' + newdiv).show(400, function(){ $(this).css({ opacity: 1, left: 0 }); });

see documentation details: http://api.jquery.com/show/#show-duration-complete

javascript jquery html css css3