IE8中的SlideUp（）和SlideDown（）特效

我正在研究Web應用程序的原型。在這個應用程序中，我有主窗口中的數據和停靠在底部的托盤，當用戶單擊選項卡時，托盤可以滑入和滑出。這是一個小提琴演示我在說什麼：http://jsfiddle.net/SetNN/2/。IE8中的SlideUp（）和SlideDown（）特效

在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

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

與jquery 1.8.2

在一起。

客戶端很有可能需要這個工作主要在IE8中...... Teh動畫在IE8以外的所有瀏覽器中都能正常工作。在IE8中，IETester和Explorer10均轉換爲IE8模式，該選項卡向上移動一點點，然後停止。當我再次點擊時，它會移回原來的位置。

我錯過了什麼讓IE8能夠正常工作？

當然，這帶來的另一個問題是，的jsfiddle本身並不在IE8顯示...

來源

2013-05-01 yu_ominae

什麼是'身高：49vh;'？ – Shikiryu 2013-05-01 08:45:04

該死的，你說得對。這是css3的49％的視口高度。這就是導致問題的原因。我完全忘記了這一點。 – 2013-05-01 14:06:47

這是高度的VH單元(height: 49vh;)，這不是由IE8瀏覽器支持的設置是不是在IE8工作。如果我們將其更改爲IE8支持的任何單元，那麼它就會正常工作。

refer to below link for more info

來源

2013-05-01 10:21:45

謝謝，我完全忽略了一個...... – 2013-05-01 14:07:04

耶穌，如果只是我發佈它作爲答案而不是評論;） – Shikiryu 2013-05-01 15:52:00

集「top」 CSS值和「overflow: hidden」到#DataPane，然後使用jQuery動畫代替效果基本show /了slideDown如下：

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

來源

2013-05-01 09:32:38

IE8中的SlideUp（）和SlideDown（）特效

回答

相關問題