SlideUp() और SlideDown() IE8

Question

में प्रभाव मैं वेब ऐप्लिकेशन के लिए प्रोटोटाइप पर काम कर रहा हूँ। इस अनुप्रयोग में, मैं मुख्य विंडो और एक ट्रे नीचे जब उपयोगकर्ता एक टैब पर क्लिक करता है जो अंदर और बाहर स्लाइड कर सकते हैं में डॉक में डेटा है। यहां एक झुकाव दिखा रहा है कि मैं किस बारे में बात कर रहा हूं: http://jsfiddle.net/SetNN/2/।

एचटीएमएल:

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

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

सीएसएस:

/* 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; 
} 

साथ जावास्क्रिप्ट

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 में मुख्य रूप से काम करने के लिए नहीं है ... तेह एनीमेशन IE8 के अलावा सभी ब्राउज़रों में ठीक काम करता है। IE8 में, दोनों IETester और Explorer10 में IE8 मोड में swicthed, टैब एक छोटा सा ऊपर ले जाता है और उसके बाद बंद हो जाता है। जब मैं दोबारा क्लिक करता हूं तो यह अपनी मूल स्थिति को वापस ले जाता है।

क्या मैं IE8 में सही ढंग से इस काम करने के लिए याद आ रही है?

बेशक

, इस के साथ एक और समस्या यह है कि jsFiddle ही IE8 में प्रदर्शित नहीं करता है ...

Answer 1

यह IE8 में काम नहीं कर रहा है के रूप में ऊंचाई VH इकाई (height: 49vh;), जो IE8 ब्राउज़र द्वारा समर्थित नहीं है में सेट है। यदि हम इसे IE8 द्वारा समर्थित किसी भी इकाई में बदलते हैं, तो यह ठीक काम करेगा।

refer to below link for more info

Answer 2

सेट 'top' सीएसएस मूल्य और #DataPane करने के लिए 'overflow: hidden' है, तो jQuery slideUp/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); 
     }); 
}