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

http://jsfiddle.net/ycheg/

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

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -