排队的HTML Javascript事件？(HTML Javascript events queued?)

 我想要实现的是在我的网站上设置div，当它们徘徊时，会导致其余的div缩小。 它产生了良好的效果，但是存在一个问题，即如果将鼠标放在div上并快速取下（在div之间切换），则在调整哪些div应缩小之前，将div重新调整为其起始尺寸。 任何和所有的帮助表示赞赏。 JSFiddle http://jsfiddle.net/vulpCod3z/aYY4E/ 
 
$('#home').hover(
    function(){
        $('#locations').animate(
            {height: "400px", width: "136px"});
        $('#catering').animate(
            {height: "400px", width: "136px"});
        $('#mealPlans').animate(
            {height: "400px", width: "136px"});
        $('#jobs').animate(
            {height: "400px", width: "136px"});
        $('#aboutUs').animate(
            {height: "400px", width: "136px"})},
    function(){
            $('#locations').animate(
                {height: "448px", width: "150px"});
            $('#catering').animate(
                {height: "448px", width: "150px"});
            $('#mealPlans').animate(
                {height: "448px", width: "150px"});
            $('#jobs').animate(
                {height: "448px", width: "150px"});
            $('#aboutUs').animate(
                {height: "448px", width: "150px"})}

What I am trying to accomplish is to have divs on my website that, when hovered on, causes the rest of the divs to shrink. It produces good results but there is an issue where if a mouse is placed on a div and taken off quickly (switching between divs) it re-sizes the divs to their starting dimensions BEFORE adjusting which divs should be shrunk. Any and all help is appreciated. JSFiddle http://jsfiddle.net/vulpCod3z/aYY4E/
 
$('#home').hover(
    function(){
        $('#locations').animate(
            {height: "400px", width: "136px"});
        $('#catering').animate(
            {height: "400px", width: "136px"});
        $('#mealPlans').animate(
            {height: "400px", width: "136px"});
        $('#jobs').animate(
            {height: "400px", width: "136px"});
        $('#aboutUs').animate(
            {height: "400px", width: "136px"})},
    function(){
            $('#locations').animate(
                {height: "448px", width: "150px"});
            $('#catering').animate(
                {height: "448px", width: "150px"});
            $('#mealPlans').animate(
                {height: "448px", width: "150px"});
            $('#jobs').animate(
                {height: "448px", width: "150px"});
            $('#aboutUs').animate(
                {height: "448px", width: "150px"})}

原文：https://stackoverflow.com/questions/20426943