JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<p id="docMode">set document mode to IE9</p>

<div class="bottomSlider">
    <div class="bottomSliderBackground"></div>
    <div class="bottomSliderContent">
      Hello From Slider
    </div>
</div>

CSS

article, aside, figure, footer, header, hgroup, 
menu, nav, section { display: block; }
  
.bottomSlider {
    position: absolute;
    left: -500px;
    top: 100px;
    height: 50px;
    width: 520px;
    border: 1px solid red;
}

.bottomSliderBackground {
    background: #C1C1C1;
    opacity: 0.8;
    filter: alpha(opacity=80);
    height: 100%;
    width: 100%;
    position: absolute;
}

.bottomSliderContent {
    position: relative;
    height: 100%;
    width: 100%;
    margin: 5px;
}

JavaScript

if (document.documentMode && document.documentMode === 9) {
    $('#docMode').remove();
}

$('.bottomSlider').mouseenter(function() {
    $(this).animate({left: '0px'}, 300);
}).mouseleave(function() {
    $(this).animate({left: '-500px'}, 300);
});





// In IE9 Document Mode, you'll notice that on hover over Gray Block on left hand side, It comes out without animation. But in IE8 and IE7 it works fine.

// #9893