IE8'de SlideUp() ve SlideDown() efektleri

Question

Web uygulaması için prototip üzerinde çalışıyorum. Bu uygulamada, ana pencerede veri var ve kullanıcı bir sekmeyi tıkladığında içeri ve dışarı kayan alt tarafa yerleştirilmiş bir tepsi var. İşte ben neden bahsettiğimi gösteren bir keman: 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; 
} 

birlikte JavaScript jquery 1.8.2 birlikte

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

.

İstemcinin bunu öncelikle IE8'de çalışması için gerektirme olasılığı vardır. IE8 dışındaki tüm tarayıcılarda Teh canlandırma iyi çalışır. IE8'de, hem IETester'da hem de Explorer10'da IE8 moduna geçilir, sekme biraz küçülür ve sonra durur. Tekrar tıkladığımda, orijinal konumunu geri taşır.

IE8'de bu işi doğru yapmak için neyi kaçırıyorum? Tabii

, bununla başka bir sorun jsFiddle kendisi ... IE8'de

Answer 1

Bu IE8 çalışmıyor. Bunu IE8 tarafından desteklenen herhangi bir birime değiştirirsek, iyi çalışır.

refer to below link for more info

Answer 2

Seti 'top' css değeri ve #DataPane için 'overflow: hidden' gösterilecek olmamasıdır, daha sonra jQuery yerine slideUp/slideDown arasında animasyon kullanmak aşağıdaki gibi: yükseklik IE8 tarayıcı tarafından desteklenmemektedir vh ünitesinde (height: 49vh;), içinde yer aldığından,

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