Effects of SlideUp () and SlideDown () in IE8

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

html:

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

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

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;
}

Accompaniment 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);
            });
        }
    })
});

along with jquery 1.8.2.

There is a high probability that the client will require this to work mainly in IE8 ... Teh animation works fine in all browsers except IE8. In IE8, both in IETester and Explorer10, launched in IE8 mode, the tab moves up a little up, and then stops. When I click again, it returns to its original position.

, IE8?

, , jsFiddle IE8...