โฮเวอร์เพื่อสลับภาพทันทีทันใด

HTML:

<div id="logo"></div>    
<div id="coming-soon"></div>

จาวาสคริปต์:

$(document).ready(function(){
    $("#logo").hover(
        function(){
            $("#logo").fadeTo(300, 0);
            $("#coming-soon").fadeTo(300, 1.0);
        },
        function(){
            $("#logo").fadeTo(300, 1.0); 
            $("#coming-soon").fadeTo(300, 0); 
        });
});

ขณะนี้องค์ประกอบ #logo จางหายไปเมื่อโฮเวอร์และ #coming-soon จางหายไป และในทางกลับกันเมื่อเมาส์ถูกถอดออกจากองค์ประกอบ (ซึ่งเป็นสิ่งที่ฉันต้องการ) แต่ให้วางเมาส์เหนือองค์ประกอบใหม่ที่จางหายไป (ข้อความ "เร็วๆ นี้" ) ทำให้องค์ประกอบเก่าจางหายไป เมื่อฉันไม่ต้องการให้มันจางหายไปอีกจนกว่าเมาส์จะไม่อยู่บนพื้นที่เดิมอีกต่อไป

คำถามของฉันคือฉันจะแก้ไขโค้ดของฉันได้อย่างไร โดยการวางเมาส์เหนือองค์ประกอบ #coming-soon จะไม่ทำให้องค์ประกอบดั้งเดิมจางหายไปอีกครั้ง


javascript jquery hover
person Danny Cooper    schedule 08.12.2011    source แหล่งที่มา

คำตอบ (2)


arrow_upward
1
arrow_downward

คุณสามารถตั้งค่าดัชนี z ของ #coming-soon เป็น -1 (หรือให้ #logo ดัชนี z สูงขึ้น)

นอกจากนี้ ให้ใช้ .stop() ก่อน fadeTo()s ของคุณ:

$("#logo").hover(
    function(){
        $("#logo").stop().fadeTo(300, 0);
        $("#coming-soon").stop().fadeTo(300, 1.0);
    },
    function(){
        $("#logo").stop().fadeTo(300, 1.0); 
        $("#coming-soon").stop().fadeTo(300, 0);
});
person Purag    schedule 08.12.2011

arrow_upward
1
arrow_downward

เพียงให้ #logo ดัชนี z สูงกว่า #coming-soon ใน CSS ของคุณ

#logo{ z-index: 1; } 
#coming-soon{ z-index: 0; }
person aziz punjani    schedule 08.12.2011
comment
@DannyCooper: ฉันได้ดูเว็บไซต์ของคุณแล้ว และหากคุณเลื่อนเมาส์ไปที่รูปภาพซ้ำๆ คิวแอนิเมชันก็จะเพิ่มมากขึ้น หากต้องการหยุดสิ่งนี้ คุณสามารถใช้ .stop() ก่อน fadeTo() ดังที่ฉันพูดในคำตอบของฉัน - person Purag; 08.12.2011
comment
@ Purmou ขอบคุณ ฉันไม่รู้ว่ามันมีปัญหานั้น ฉันลองใช้โค้ดที่คุณแนะนำแล้ว และด้วยเหตุผลบางประการ เอฟเฟกต์โฮเวอร์ไม่ทำงานในโฮเวอร์ครั้งแรกของฉัน ฉันต้องถอดเมาส์และวางเมาส์เป็นครั้งที่ 2 เพื่อเปิดใช้งานเอฟเฟกต์ มีความคิดอะไรบ้าง? - person Danny Cooper; 08.12.2011
comment
@DannyCooper: มันควรจะทำงานได้ดี คุณต้องการส่งอีเมลถึงฉันเพื่อให้ฉันสามารถช่วยเหลือคุณเพิ่มเติมได้หรือไม่? - person Purag; 08.12.2011
comment
เข้าใจแล้ว ขอบคุณสำหรับการสาธิต ฉันมี JS อยู่ที่ส่วนท้ายขององค์ประกอบ ‹body› และฉันคิดว่ามันโหลดได้ไม่เร็วพอ ฉันใส่มันไว้ใน ‹head› และทุกอย่างทำงานได้สมบูรณ์แบบแล้วตอนนี้ - person Danny Cooper; 15.12.2011