jquery IE Fadein و Fadeout Opacity

سئل على ١٦ أغسطس ٢٠٠٩  ·  تمت مشاهدة 71.9k مرة  ·  مصدر

Tom picture
في ١٦ أغسطس ٢٠٠٩

أحصل على هذه المشكلة الغريبة في IE مع CSS Overlay أنا أتقدم بطلب للحصول على lightbox. في الأساس ، أستخدم fadein و fadeout لـ jquery - المشكلة هي أن كل شيء يعمل بشكل جيد باستثناء IE .

في IE - لا أحصل على fadein - بل إنه ينتقل مباشرة إلى الخلفية العتامة.

عند التلاشي - يزيل "التعتيم" لمدة أقل من ثانية واحدة ويجعل الصفحة "بلون خالص" قبل إزالة التراكب.

هل يعرف أحد كيف يصلح هذا الخطأ؟ إنه أمر مزعج حقًا - أنا أستخدم جميع المرشحات الصحيحة وما إلى ذلك ، إنها مجرد ميزة fadein و fadeout في IE؟

الإجابات

woodstylee picture
في ٢٤ أغسطس ٢٠٠٩
48

لدي نفس المشكلة في IE8. أدى تعيين عتامة DIV في JavaScript قبل أن استدعيت fadeIn () إلى حل المشكلة:

$('.overlay').css('filter', 'alpha(opacity=40)');
$('.overlay').fadeIn(500);

كان هذا يستخدم فقط DIV عادي وليس PNG شفافة.

Erwinus picture
في ٢٧ يناير ٢٠١٠
6

ربما يكون هذا حلاً جيدًا لك (بالنسبة لي هو كذلك). الحل بسيط ولكنه فعال (ولطيف جدًا). يواجه IE مشاكل مع شفافية ألفا عندما لا يكون لخلفية الوالد أي لون (شفافية كاملة).

ما نفعله هنا (انظر المثال أدناه) هو إضافة div أولاً يكون شبه شفاف (شفاف للعين). نظرًا لأنها أول div داخل اللوحة / الحاوية (=> a div على سبيل المثال) ويتم وضعها بشكل مطلق ، سيتم وضع كل المحتوى بعد هذا div أعلى عنصر div الأول ، وبالتالي تصبح هذه خلفية جميع المحتويات الأخرى داخل هذه اللوحة القماشية.

نظرًا لوجود خلفية الآن ، لا يُظهر IE أي نقاط سوداء سيئة (بكسل) أو منطقة سوداء عند التلاشي أو التلاشي (عند تغيير العتامة) أو عند ضبط عتامة اللوحة القماشية على قيمة أقل من 100.

كيف - مثال مع صورة 100x100:

<div id="mycanvas" style="display:none;">
<div style="position:absolute; background:#FFF; display:block; filter:alpha(opacity=1); opacity:0; width:100px; height:100px;">
</div>
<img id="myImage" src="example.png" width="100" height="100"/>
</div>

لتتلاشى أو تتلاشى الصورة باستخدام jQuery:

    $("#mycanvas").fadeIn("slow", function() 
{setTimeout(function(){$("#mycanvas").fadeOut("slow");},2000 );}
);

هذا ممكن أيضًا:

$("myImage").fadeIn("slow");

هذا هو!

الشيء الجميل هو أن هذا الحل يعمل أيضًا مع VML / SVG (رافائيل) أو أي محتوى آخر يحتوي على شفافية ألفا. كما أنك لست مضطرًا لتغيير / اختراق كود JS الخاص بك ، لأن هذا "الاختراق" لا يؤثر على المتصفحات الأخرى.

آمل أن يساعد.

Jerome picture
في ١٩ أكتوبر ٢٠٠٩
0

لديك أيضًا مشكلة في استخدام هذا المستعرض غير الهام.

يمكنك أيضًا التحقق من أن المتصفح هو IE بدلاً من استخدام .animate({opacity:0}) سيتعين عليك استخدام .animate({opacity:'hide'}) .

spirytus picture
في ٩ ديسمبر ٢٠٠٩
0

من الصعب معرفة ذلك بدون رمز دقيق ، لكنني أعلم أن IE يواجه مشكلات في تطبيق التلاشي على العناصر باستخدام position: relative لذلك إذا كنت مكانك ، فسأحقق مما إذا كانت العناصر التي تحاول أن تتلاشى ، إما بشكل مباشر أو من خلال والديها ، لديها position: relative . آمل أن يساعد.

morewry picture
في ٢٢ يوليو ٢٠١٠
0

في الحالة التي لاحظت فيها هذه المشكلة ، تمكنت من إصلاحها جزئيًا باستخدام الطريقة الموضحة بواسطةErwinus. أدى استخدام هذه التقنية إلى جعل الهالة أقل بشاعة ، ولكن لا يزال من الممكن رؤية هالة سوداء غريبة.

تمكنت من تطبيق خلفية للصورة نفسها ،

#slideshow img{background:#FFF url("image/background-of-slideshow.jpg") no-repeat -15px -35px;}

وهذا أصلح المشكلة تمامًا. لقد علقته في ملف iefix.css الخاص بي الذي تم تضمينه عبر التعليقات الشرطية. لم يتطلب أي HTML إضافي وقدم تأثير تلاشي أجمل من الحل الآخر.

من الواضح أن هذا لن يكون بالضرورة هو الحل لجميع الحالات ، ولكنه كان قابلاً للتطبيق بالنسبة لي وعمل بشكل جيد.

styol picture
في ٩ أغسطس ٢٠١٠
0

إليك حل آخر محتمل لهذه المشكلة ... من المفترض أن يكون لدى jQuery بعض المشكلات (قبل 1.4؟) في اكتشاف التعتيم الذي تم تعيينه عبر CSS. يبدو أنه لا توجد مشكلات إذا قمت بتعيين عتامة العناصر باستخدام jQuery قبل تحريك العتامة (fadeIn ، fadeOut ، fadeTo ، والتحريك). كما هو الحال في ، يمكنك تعيين العتامة باستخدام CSS للمتصفحات التي تدعمها ثم تكديسها أيضًا فوق هذا الإعداد للشفافية باستخدام jQuery ويجب أن تعمل بشكل صحيح في IE. هذا هو الحال أيضا للعرض لا شيء.

مثال:

$('#element').css("opacity","0").fadeIn("slow");

المصدر: http://www.boagworld.com/forum/comments.php؟DiscussionID=3555#Item_3

LoveMeSomeCode picture
في ٢٠ يناير ٢٠١١
0

حسنًا ، لقد واجهت مشكلات مع هذا ولم ينجح أي من الحلول التي وجدتها عبر الإنترنت. لقد كان يقودني إلى الجنون لأنك إذا نظرت إلى موقع W3C: http://www.w3schools.com/Css/css_image_transparency.asp ، فقد نجح في IE8. لكنني أنسخها إلى بيئة التطوير الخاصة بي ، فهي لا تفعل ذلك.

كان لدي هذا الرمز:

 <script type="text/javascript">
       $(document).ready(function() {
        $('.disabled').fadeTo("slow", 0.33);
  });
 </script>

وهذا الترميز:

    <a href='homestarrunner.com' class='disabled'>
<img src='http://www.w3schools.com/Css/klematis.jpg' /></a>

لقد نجحت في FF و Chrome وكل شيء ولكن IE8.

ما أدركناه في النهاية هو أن IE8 لم يكن يطبق البرنامج النصي عند العمل ضد المضيف المحلي. لقد قمت بنسخ هذا الرمز إلى مضيف ويب و BAM! يعمل بشكل مثالي. لا أعرف لماذا يقوم IE8 بهذا ، لكني أرى أنه سبب آخر يكره المطورين IE.

ربما هذا أنا فقط.

Lev picture
في ٩ فبراير ٢٠١١
0

LoveMeSomeCode (لا يمكنني الرد مباشرة على رسالتك نظرًا لأن stackoverflow يعتقد على ما يبدو أنني بحاجة إلى X قدر من السمعة لأنني أستطيع الرد على رسالة شخص ما - لماذا؟!؟!) أعتقد أن هذا بسبب ميزة ضعيفة حقًا تأتي مع IE8 " عرض التوافق "(نعم ، حتى أعرج من الوضع نفسه).

لقد لاحظت أن الناس كانوا يتلقون كل أنواع السلوك الغريب عند مشاهدة موقع الويب الذي أطوره في العمل (عندما كنت على IE) بعد بعض التلاعب ، اكتشفت أن IE8 يحتوي على إعداد يقوم OUT-OF-THE-BOX بتعيين جميع الصفحات المحلية لعرضها في عرض التوافق! بغض النظر عن تصريح المستند الخاص بك أو مدى صرامة الترميز الخاص بك ، سيستخدم IE8 عرض التوافق لجميع صفحات الإنترانت (وأفترض أن المضيف المحلي هو نفسه).

انقر فوق أدوات> إعدادات طريقة عرض التوافق> قم بإلغاء تحديد المربع الذي يشير إلى "عرض مواقع الإنترانت في طريقة عرض التوافق"

لماذا يتم تمكين هذا افتراضيًا ليس لدي أي فكرة ، لكنه تسبب في الكثير من المتاعب مع العزلة ثم إخبار الناس بالإصلاح.