jQuery फीडइन फीडऑट - आईई 8

Question

फीका नहीं है क्या कोई मुझे बता सकता है कि क्यों .jpg IE8 में फीका नहीं होगा या फीका नहीं होगा। अभी यह कोई अस्पष्टता परिवर्तन के साथ सिर्फ अपमानजनक और फिर से दिख रहा है। मैंने इसे स्थानीय रूप से और एक प्रकाशन सर्वर पर स्थापित किया है, अजीब बात यह है कि छवियों को स्थानीय स्तर पर ठीक से बाहर और बाहर फीका किया जाता है, यह केवल तभी होता है जब मैं प्रकाशन सर्वर पर जाता हूं कि वे फीका बंद कर देते हैं।

बस सोच रहा है कि अगर मुझे कुछ याद आ रहा है तो कोई जल्दी से अपने सिर के ऊपर से मेरी मदद कर सकता है।

यहां gcRotateContent है जो प्रकाशन सर्वर पर है, अगर मैं सिर्फ एक छवि को फेंक देता हूं और बाहर काम करता हूं तो यह काम करता है, किसी कारण से यह इस मार्कअप के साथ काम नहीं करता है।

<div class="gcRotateContent"> 
    <div id="USCFRR2EN" class="gcEmployeeProfile"> 
     <div class="gcEmployeeProfileHeading"> 
     Meet John</div> 
     <div class="gcEmployeeProfileContent"> 
     <div class="gcEmployeeProfileHRPad"> 
     </div> 
     <div class="gcEmployeeProfileHR"> 
     </div> 
     <div class="gcEmployeeProfileHRPad"> 
     </div> 
     <div class="gcEmployeeProfileSLVideo"> 
      <img src="/PublishingImages/Profile_JOHN-190x96.jpg" alt="Portrait of employee John." 
       height="96" width="190"></div> 
     <div class="gcEmployeeProfileName"> 
     </div> 
     <div class="gcEmployeeProfileTitle"> 
      Software Development Lead, Server Performance</div> 
     <div class="gcEmployeeProfileQuote"> 
      “You will find no other company with the sheer breadth of technologies. The things you get to see and learn from other 
      people are amazing.”</div> 
     </div> 
     <div class="gcEmployeeProfileFooter"> 
     </div> 
    </div> 
</div> 

<div class="gcRotate"> 
     <div class="gcRotateContent"> 
     <div style="border: solid 2px black; text-align: center; width: 150px;"> 
      This is first content 
      <img src="http://pix.motivatedphotos.com/2008/6/16/633492359109161542-Skills.jpg" 
       alt="First" /> 
     </div> 
     </div> 
     <div class="gcRotateContent"> 
     <div style="border: solid 2px black; text-align: center; width: 150px"> 
      This is second content 
      <img src="http://www.funnycorner.net/funny-pictures/5010/cheezburger-locats.jpg" 
       alt="Second" /> 
     </div> 
     </div> 
     <div class="gcRotateContent"> 
     <div style="border: solid 2px black; text-align: center; width: 150px"> 
      This is third content 
      <img src="http://icanhascheezburger.files.wordpress.com/2007/06/business.jpg" alt="Third" /> 
     </div> 
     </div> 
    </div> 



    <div> 
     This shouldn't move. 
    </div> 

    <script type="text/javascript"> 
     function fadeContent() { 

     $(".gcRotateContent").first().customFadeOut(500, function() { 
      $(".gcRotateContent:hidden:first").customFadeIn(500) 
     }); 
     $(".gcRotateContent").first().appendTo($(".gcRotateContent").parent()); 
     } 

     $(".gcRotate").height(0); 

     $(".gcRotateContent").each(
     function() { 
      if ($(".gcRotate").height() < $(this).height()) { 
       $(".gcRotate").height($(this).height()); 
      } 
     } 
     ); 

     $(".gcRotateContent").each(function() { 
     $(this).css("display", "none") 
     }); 

     $(".gcRotate").hover(function() { window.clearInterval(timer) }, function() { timer = window.setInterval("fadeContent()", 2000) }); 

     $(".gcRotateContent").first().show(0); 
     var timer = window.setInterval("fadeContent()", 2000); 

     (function($) { 
     $.fn.customFadeIn = function(speed, callback) { 
      $(this).fadeIn(speed, function() { 
       if (jQuery.browser.msie) 
        $(this).get(0).style.removeAttribute('filter'); 
       if (callback != undefined) 
        callback(); 
      }); 
     }; 
     $.fn.customFadeOut = function(speed, callback) { 
      $(this).fadeOut(speed, function() { 
       if (jQuery.browser.msie) 
        $(this).get(0).style.removeAttribute('filter'); 
       if (callback != undefined) 
        callback(); 
      }); 
     }; 
     })(jQuery); 
    </script> 

Answer 1

मैं इसे समझ से बाहर, सीएसएस सेटिंग स्थिति: छवि पर रिश्तेदार, aparently IE8 कि पसंद नहीं है, वहाँ एक समाधान मुझे आश्चर्य है, खोज शुरू होता है।

Answer 2

को पृष्ठभूमि चित्र (एक ही आकार के) एक div के साथ अपनी छवि को बदलें और फीका-इन/div आउट।

<div style="background-image:url('paper.gif');height:xxxpx;width:xxxpx"></div> 

Answer 3

स्पष्ट रूप से एक कामकाज है! इस

<div> 
<img id='myImg' src='http://mydomain.com' style='position:absolute;top:10px;left:5px;filter:inherit;opacity:inherit' /> 
</div> 

मज़े,

ओमर

Answer 4

मैं सिर्फ था:

आप निरपेक्ष/सापेक्ष स्थिति में तत्वों निम्नलिखित सीएसएस विशेषताएं सेट:

opacity:inherit; 
filter:inherit; 

उदा समस्या, और सभी सीएसएस ticks काम नहीं किया था। फेडइन/आउट एफएफ और क्रोम पर काम किया, लेकिन आईई 8 में नहीं, तत्व बिल्कुल दिखाई नहीं दिया। आईई 7 में वे अदृश्य से दृश्यमान हो गए।

तो मेरी समस्या को ठीक करने मैं सिर्फ अन्य ब्राउज़र पर fadein/आउट रखने के लिए और तत्वों IE8 में दिखाई देते हैं बनाना चाहते थे। समाधान कॉलबैक का उपयोग इस तरह किया गया था:

$(".elements").fadeIn("slow",function(){$(this).show()}): 
$(".elements").fadeOut("slow",function(){$(this).hide()}): 

इस तरह मैं हमेशा अंत में परिणाम को बल देता हूं।

Answer 5

एक त्वरित और गंदा ठीक लिए (या अगर ऊपर दिए गए सुझाव सिर्फ काम नहीं कर रहे, के रूप में मेरे मामला है) तो आप बस jQuery के fadein/fadeOut दिखाएँ/छिपाएँ साथ बदल सकते हैं। तो html में कार्य करें:

<!--[if IE]> 
<script type="text/javascript src="ieFixes.js"></script> 
<![endif]--> 

और कुछ IE के जावास्क्रिप्ट फ़ाइल में हैक करता है (जैसे ieFixes.js) डाल:

jQuery.fn.fadeIn = function() { 
    this.show(); 
} 

jQuery.fn.fadeOut = function() { 
    this.hide(); 
} 

आप इस थोड़ा tweak करना होगा अगर आप चेनिंग रहे हैं एनिमेट कॉल, आदि