Soru jQuery fadeIn fadeOut - IE8 solmaz


Herkes bana IE8'de neden bir .jpg'nin kaybolmayacağını veya kaybolmayacağını söyleyebilir. Şu anda sadece opaklık değişimleri olmadan sadece hayal kırıklığı ve yeniden ortaya çıkıyor. Bunu yerel olarak ve bir yayıncılık sunucusunda hazırladım, garip bir şey, sadece yerel olarak içeri girip çıktığında, sadece yayıncı sunucuya gittiğimde solmaya son verdiler.

Sadece birisinin eksik bir şey olup olmadığını merak ediyorum, hızlı bir şekilde başlarının tepesinden bana yardım edebilirdi.

Burada yayın sunucusundaki gcRotateContent, Bir görüntüyü fırlatır ve dışarıda bir solma yaparsam, bir sebepten dolayı bu biçimlendirme ile çalışmaz.

<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>

19
2018-05-04 15:38


Menşei


İşaretlemenizi ve komut dosyanızı görelim. - Ben
Bize bir örnek göster ve birinin yardım edebileceğini garanti ederim. - Sam
Çünkü IE - Eric
@Eric - MSIE gittiği sürece, IE8 aslında bu kadar kötü değil! - Sam
Doğru tespit. Kesinlikle IE6'yı yener. - Eric


Cevaplar:


Anlaşılan bir çözüm var!

Mutlak / göreceli olarak konumlandırılmış öğeleri aşağıdaki css özniteliklerini ayarlamanız yeterlidir:

opacity:inherit;
filter:inherit;

Örneğin:

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

İyi eğlenceler,

Ömer


59
2017-09-02 15:45



Bu bir çekicilik gibi çalışır! Sitemde de aynı sorun vardı. Görüntü içeren div elemleri soluyordu. Bunu IE9 ve IE7 için düzeltmek için div elemlerine uygun boyutlar koymak yeterliydi. Bu divlardan önce 0,0 boyutları vardı, çünkü içlerindeki görüntüler mutlak olarak konumlandırıldı. Ama sonra hala IE8 solmaya istemedi, o sadece ortaya çıktı. Saydamlık içindeki tüm öğeler için, opaklığı ve filtreyi devralmak, bunu düzeltmiştir. - Lukasz Korzybski
.ie8 * {opaklık: devralma; filtre: devral; } - zznq
fantastik! Bu can sıkıcı bir soruna kolay bir çözümdür - ejfrancis
Yardım ettiğime sevindim :) - Omeriko
+1 Mükemmel çözüm - Cilan


Bunu anladım, css ayar konumu: göreceli olarak göreli, aparently ie8 bundan hoşlanmıyor, merak ettiğim bir çözüm var, arama başlıyor.


6
2018-05-04 16:28





Sadece bu problemi yaşadım ve tüm css kene işe yaramadı. FadeIn / Out FF ve Chrome üzerinde çalıştı, ancak IE8'de değil, eleman hiç ortaya çıkmadı. IE7'de görünmezden görünmeye başladılar.

Sorunumu çözmek için sadece diğer tarayıcılarda fadeIn / Out özelliğini tutmak ve öğeleri IE8'de görünmesini istedim. Çözüm, geri bildirimi şöyle kullanacaktı:

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

Bu sayede daima istediğim sonucu zorluyorum.


1
2017-07-13 15:32





Hızlı ve kirli bir düzeltme için (veya yukarıdaki öneriler çalışmazsa, benim durumum gibi) jQuery'nin fadeIn / fadeOut'unu show / hide ile değiştirebilirsiniz. Yani html'de:

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

ve IE hacks (örneğin ieFixes.js) bazı javascript dosyasında şunu yazdı:

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

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

Aramaları vb. Yönlendiriyorsanız, bunu biraz düzeltmeniz gerekir.


1
2018-06-22 21:54





Resminizi bir arka plan resmiyle bir div (aynı boyutta) ile değiştirin ve div'in içine / bırak / bırak.

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

0
2018-05-04 15:45



Kendimi MSIE'nin kendisi yerine TheDawckta'nın koduyla ilgili bir sorun olduğunu hissediyorum. IE8'de aşağıdakileri deneyin ve içeri girip çıkmadığını görün ... eideus.com/demoImageFade.html - Sam
GcRotateContent içindeki öğelerin hiçbirini değiştiremiyorum. - theDawckta
gcRotateContent ......? Tamam, şimdi sorunuzu düzenleme ve bazı kod ekleme zamanı! - Bastiaan Linders
@Sam banana kodumu sunucuma koydum ve iyi çalışıyor. Gerçekten kafa karıştırıcı. - theDawckta
Parlak cümle! - Bastiaan Linders