تأثير تلاشى جافا سكريبت بسيط لا يعمل في IE7 / 8، غرامة في متصفحات أخرى

Question

يرى http://jontonter.notomato.com.au/.

لدي تأثير تلاشى بسيط مكتوب عند تحريك بعض عناصر القائمة وضعت فوق كومة من الصور التي يتم وضعها جميعا على رأس بعضها البعض.

$("#homeNav li").hover(function(){
    //make a variable and assign the hovered id to it
    var elid = $(this).attr('id');
    //hide the image currently there
    $("div#homeImages div").hide();
    //fade in the image with the same id as the selected buttom
    $("div#homeImages div#" + elid + "").fadeIn("slow");

    });

ومع ذلك، لن يعمل في Internet Explorer.

لقد حاولت البحث عنها، لكن لا يمكنني العثور على تقنية تلاشى بسيطة ستسمح لي؛ لديك مكدسة من الصور وضع مجموعة من عناصر التحكم (في هذه الحالة <li> عناصر) عند التحليق فوق عنصر تحكم معين، يتلاشى أحد الصور، يجب أن يكون الآخرون مخفيا، يجب أن يتلاشى المرء الحالي.

ويبدو دائما أن يكون لديك خطأ ولا تتلاشى بشكل صحيح. هل يعرف أحد أين أخطأ؟

Answer 1

ما يلي يعمل بالنسبة لي (تغييرات HTML):

<div id="homeImages">
    <div style="display: none; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/conditioned.jpg');" id="homeConditioned"></div>
    <div style="display: none; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/guided.jpg');" id="homeGuided"></div>
    <div style="display: block; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/informed.jpg');" id="homeInformed"></div>
    <div style="display: none; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/shaped.jpg');" id="homeShaped"></div>
    <div style="display: none; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/sustained.jpg');" id="homeSustained"></div>
</div>

Answer 2

بعض الطلقات في الظلام، أنا ذاهب إلى المنزل للنوم الآن :)

• أعلم من النموذج الأولي أن تأثير التلاشي يفضل أن يكون له كلاسك وبسيط <div> directrly داخل العنصر ليتلاشى. يمكنك محاولة إضافة هذا إلى كل صورة؟
• ماذا يحدث إذا أعطيت تخطيط الصور (على سبيل المثال باستخدام zoom: 1 الممتلكات CSS)
• ماذا يحدث إذا أعطيت الصور لون الخلفية.