SlideUp() und SlideDown() Effekte in IE8

Question

Ich arbeite an dem Prototyp für Web-App. In dieser App habe ich Daten im Hauptfenster und ein Tray an der Unterseite angedockt, die ein- und ausgehen kann, wenn der Benutzer auf einen Tab klickt. Hier ist eine Geige, die zeigt, wovon ich spreche: http://jsfiddle.net/SetNN/2/.

Die html:

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

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

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

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

zusammen mit jquery 1.8.2.

Es gibt eine große Wahrscheinlichkeit, dass der Client dies erfordert, um hauptsächlich in IE8 zu arbeiten ... Die Animation funktioniert gut in allen Browsern außer IE8. In IE8, beide in IETester und Explorer10 in den IE8-Modus geschaltet, bewegt sich die Registerkarte ein kleines bisschen hoch und stoppt dann. Wenn ich erneut klicke, bewegt sich die ursprüngliche Position zurück.

Was fehlt mir, damit dies im IE8 korrekt funktioniert?

Natürlich ein anderes Problem dabei ist, dass jsFiddle sich nicht in IE8 nicht angezeigt ...

Answer 1

Arbeits Dies ist nicht in IE8 wie die Höhe in vh Einheit eingestellt ist (height: 49vh;), die von IE8 Browser nicht unterstützt wird. Wenn wir dies zu einer Einheit ändern, die von IE8 unterstützt wird, dann wird es gut funktionieren.

refer to below link for more info

Answer 2

Set 'top' CSS-Wert und 'overflow: hidden' zu #DataPane, dann verwenden Sie jQuery animieren statt slideUp/slidedown wie folgt:

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