Hiệu ứng SlideUp() và SlideDown() trong IE8

Question

Tôi đang làm việc trên nguyên mẫu cho ứng dụng web. Trong ứng dụng này, tôi có dữ liệu trong cửa sổ chính và khay được gắn ở dưới cùng có thể trượt vào và ra khi người dùng nhấp vào một tab. Đây là một fiddle thể hiện những gì tôi đang nói về: http://jsfiddle.net/SetNN/2/.

Các html:

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

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

Các 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; 
} 

Các kèm 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); 
      }); 
     } 
    }) 
}); 

cùng với jquery 1.8.2.

Có khả năng mạnh mẽ là khách hàng sẽ yêu cầu điều này để làm việc chủ yếu trong IE8 ... Hoạt ảnh của Teh hoạt động tốt trong tất cả các trình duyệt ngoại trừ IE8. Trong IE8, cả IETester và Explorer10 đều được chuyển sang chế độ IE8, tab này di chuyển lên một chút và sau đó dừng lại. Khi tôi nhấp một lần nữa nó di chuyển trở lại vị trí ban đầu của nó.

Tôi thiếu gì để thực hiện công việc này một cách chính xác trong IE8?

Tất nhiên, một vấn đề với điều này là jsFiddle tự nó không hiển thị trong IE8 ...

Answer 1

này không hoạt động trong IE8 như chiều cao được thiết lập trong đơn vị vh (height: 49vh;), mà không được hỗ trợ bởi trình duyệt IE8. Nếu chúng ta thay đổi điều đó thành bất kỳ đơn vị nào được IE8 hỗ trợ, nó sẽ hoạt động tốt.

refer to below link for more info

Answer 2

Set 'top' giá trị css và 'overflow: hidden' để #DataPane, sau đó sử dụng jQuery động thay vì slideUp/slideDown như sau:

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