SlideUp() and SlideDown() effects in IE8

Question

I'm working on the prototype for web app. In this app, I have data in the main window and a tray docked at the bottom which can slide in and out when the user clicks on a tab. Here is a fiddle demonstrating what I am talking about: http://jsfiddle.net/SetNN/2/.

The html:

<div id="DataPane">
<div id="VisibleContainer">
    <div class="handle">

    </div>
</div>
<div id="InvisibleContainer">
    <div class="handle">
    </div>
    <div class="dataContainer">
    </div>
</div>

The css:

/* DATA PANE */
#DataPane {
  position: absolute;
  width: 100%;
  bottom: 0;
  opacity: 0.5;
  z-index: 20;
}
#DataPane .handle {
  width: 50px;
  margin: 0px auto 0px auto;
  background-color: #333333;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
  box-shadow: 4px 2px 11px rgba(50, 50, 50, 0.75);
}
#DataPane #VisibleContainer .handle {
  height: 20px;
  color: #ffffff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
#DataPane #InvisibleContainer {
  display: none;
}
#DataPane #InvisibleContainer .handle {
  height: 5px;
  box-shadow: 4px 2px 11px rgba(50, 50, 50, 0.75);
}
#DataPane #InvisibleContainer .dataContainer {
  width: 99%;
  height: 49vh;
  margin: 0px auto 0px auto;
  background-color: #333333;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  box-shadow: 4px 2px 11px rgba(50, 50, 50, 0.75);
}
#DataPane #InvisibleContainer .dataContainer #DataContainer {
  position: absolute;
  background-color: #ffffff;
}

The accompanying javascript

    var dataPaneMinimumOpacity;

$(document).ready(function () {
    // Initialise variables
    dataPaneMinimumOpacity = $("#DataPane").css('opacity');

    // Data pane
    $("#DataPane .handle").click(function () {
        var duration = 600;

        var invisibleContainer = $("#DataPane #InvisibleContainer");
        if ($(invisibleContainer).is(':visible')) {
            // In this case slideup() actually hides the container
            $(invisibleContainer).slideUp(duration, function () {
                $('#DataPane').fadeTo(duration / 2, dataPaneMinimumOpacity);
            });
        } else {
            $(invisibleContainer).slideDown(duration, function () {
                $('#DataPane').fadeTo(duration / 2, 1);
            });
        }
    })
});

together with jquery 1.8.2.

There is a strong likelihood that the client will require this to work primarily in IE8... Teh animation works fine in all browsers except IE8. In IE8, both in IETester and Explorer10 swicthed to IE8 mode, the tab moves up a tiny bit and then stops. When I click again it moves back its original position.

What am I missing to make this work correctly in IE8?

Of course, another problem with this is that jsFiddle itself does not display in IE8...

Answer 1

This is not working in IE8 as the height is set in vh unit(height: 49vh;), which is not supported by IE8 browser. If we change that to any unit that is supported by IE8, than it will work fine.

refer to below link for more info