IE8でのSlideUp（）とSlideDown（）の効果

Question

私はWebアプリケーションのプロトタイプを作成しています。 このアプリでは、メインウィンドウにデータがあり、ユーザーがタブをクリックしたときに上下にスライドできるトレイが下にドッキングされています。ここで私が話していることを実演しているフィドルです：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; 
} 

添付のJavaScriptのjQuery 1.8.2と共に

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

。

クライアントが主にIE8で動作するように要求する可能性が高いです... IE8以外のすべてのブラウザでTehアニメーションがうまく動作します。 IE8では、IETesterとExplorer10の両方がIE8モードに切り替わり、タブが少し上に移動して停止します。もう一度クリックすると元の位置に戻ります。

IE8で正しく動作させるには何が欠けていますか？ #DataPaneへ

もちろん

、これと別の問題がjsFiddle自身がIE8で表示されないということです...

Answer 1

これはIE8で動作していません。 IE8でサポートされているユニットに変更した場合、うまく動作します。

refer to below link for more info

Answer 2

セット「top」CSSの値と「overflow: hidden」の場合、jQueryのではなく、slideUp/slideDownのアニメーションを使用次のように：高さはIE8のブラウザでサポートされていないVHユニット(height: 49vh;)、に設定されているよう

if($('#DataPane').css('top') > 30) { 
      $('#DataPane').stop(true).animate({top: '300px'}, function() { 
      $('#DataPane').fadeTo(duration/2, dataPaneMinimumOpacity); 
     }); 
} else { 

      $('#DataPane').stop(true).animate({top: '30px'}, function() { 
      $('#DataPane').fadeTo(duration/2, 1); 
     }); 
}