jQuery的：FadeToggle + div的主叫DIV乙

Question

概述：當鼠標懸停在格A，然後DIV乙淡入然後您可以將移動進入格B.

我很滿意所有的在我的演示中有特點，但有一些問題我無法克服。我想我從錯誤的角度來看待它。

工作例如：http://jsfiddle.net/t1c76m6g/

---

問題我面對：

• 有時被子菜單切換兩倍。 （要重現：Button1的懸停，將鼠標移動到Submenu1，移動鼠標回到Button1，然後通過Button1的頂部退出。）GIF screen capture
• 如果你從一個按鈕，它的子菜單移動鼠標速度太快，那麼子菜單fadeIn會中斷，它會立即彈出。 GIF screen capture
• 可以用CSS3來實現這個效果（div A調用di​​v B）嗎？

---

jQuery的

$("#button1").hover(function() { 
    $("#submenu1").stop().fadeToggle(1000, function() { 
    }); 
}); 

$("#button2").hover(function() { 
    $("#submenu2").stop().fadeToggle(1000, function() { 
    }); 
}); 

$("#button3").hover(function() { 
    $("#submenu3").stop().fadeToggle(1000, function() { 
    }); 
}); 


$(".chain").mouseenter(function() { 
    $(this).stop().fadeIn(0); 
}); 

$(".chain").mouseout(function() { 
    $(this).stop().fadeOut(1000); 
}); 

---

HTML

<div id="button_container"> 
<div id="button1">Button 1</div> 
<div id="button2">Button 2</div> 
<div id="button3">Button 3</div> 

<div id="submenu1" class="chain">Submenu 1</div> 
<div id="submenu2" class="chain">Submenu 2</div> 
<div id="submenu3" class="chain">Submenu 3</div> 
</div> 

---

CSS

#button_container { 
margin-top:100px; 
margin-left:50px; 
} 

#button1,#button2,#button3 { 
display:inline-block; 
background-color:LightBlue; 
font-size:30px; 
cursor:pointer; 
} 

.chain { 
display:none; 
} 

#submenu1 { 
background:red; 
width:200px; 
height:100px; 
position:fixed; 
} 
#submenu2 { 
background:blue; 
width:300px; 
height:200px; 
position:fixed; 
} 
#submenu3 { 
background:orange; 
width:400px; 
height:300px; 
position:fixed; 
} 

Answer 1

好吧，就我所知，好像在代碼中有很多動畫中斷。我不認爲在這種情況下你應該使用.hover，而是.mouseenter和.mouseleave。

檢查這個代碼：

$(document).ready(function() { 

    $("#button1").mouseenter(function() { 
     $("#submenu1").stop().fadeIn(); 
     }).mouseleave(function() { 
     $("#submenu1").stop().fadeOut(300); 
    }); 

    $("#button2").mouseenter(function() { 
     $("#submenu2").stop().fadeIn(); 
     }).mouseleave(function() { 
     $("#submenu2").stop().fadeOut(300); 
    }); 

    $("#button3").mouseenter(function() { 
     $("#submenu3").stop().fadeIn(); 
     }).mouseleave(function() { 
     $("#submenu3").stop().fadeOut(300); 
    });  

    $("#submenu1, #submenu2, #submenu3").mouseenter(function() { 
     $(this).stop().fadeIn(0); 
    }); 

    $("#submenu1, #submenu2, #submenu3").mouseout(function() { 
     $(this).stop().fadeOut(300); 
    }); 

}); 

http://jsfiddle.net/t1c76m6g/1/

至於你爲什麼當你徘徊分格的它立即淡入，以及它的簡單。 YOu使用.stop（）並取消所有影響該選擇器的其他動畫。將它與.fadein（0）結合在一起，就可以得到圖片。

用css影響其他div是不可能的;你也許可以在之前解決某些問題。