Effetti SlideUp() e SlideDown() in IE8

Question

Sto lavorando al prototipo per l'applicazione web. In questa app, ho i dati nella finestra principale e un vassoio agganciato nella parte inferiore che può scorrere dentro e fuori quando l'utente fa clic su una scheda. Ecco un violino che dimostra di cosa sto parlando: http://jsfiddle.net/SetNN/2/.

Il html:

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

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

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

Il javascript accompagna

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

insieme jquery 1.8.2.

Esiste una forte probabilità che il client richieda che funzioni principalmente in IE8 ... L'animazione funziona bene in tutti i browser tranne IE8. In IE8, sia in IETester sia in Explorer10 portati in modalità IE8, la scheda si sposta di un piccolo bit e quindi si arresta. Quando clicco di nuovo, torna alla sua posizione originale.

Cosa mi manca per funzionare correttamente in IE8?

Naturalmente, un altro problema è che jsFiddle per sé non viene visualizzato in IE8 ...

Answer 1

Questo non funziona in IE8 come l'altezza è impostata nell'unità vh (height: 49vh;), che non è supportato dal browser IE8. Se lo cambiamo su qualsiasi unità supportata da IE8, funzionerà correttamente.

refer to below link for more info

Answer 2

Set 'top' valore css e 'overflow: hidden' per #DataPane, quindi utilizzare jQuery animare invece di slideUp/slideDown come segue:

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