jquery - Transitions on IE10 do not work on two absolutely positioned elements (With example) -
basically have 2 divs absolutely positioned in same spot, , slide through them opacity controls.
using modernizr check css transition support , rely on jquery fades ie8 , ie9, ie10 have transitions doesnt fall that, , plain doesnt work there.
the following example tested on chrome , ie10
i avoid heavy html/css changes on structure, , javascript fallback decent enough if didnt have sniff it.
html
<div class="opaque"></div> <div class="opaque green active"></div> <button> toggle</button> enter code here
css
.opaque { position: absolute; left: 200px; width:100px; height:100px; background-color:red; transition: opacity 1s ease-in-out; opacity:0; } .opaque.green { background-color: green; } .opaque.active { opacity: 1; }
js
$("button").on("click", function(){ $(".opaque").toggleclass("active"); })
try code :
transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out;
this should work ie10 , can read cross-browser
Comments
Post a Comment