如何將相同的jQuery懸停動畫應用於不同高度的兩個div並排？

Question

我有一個菜單<div>與一個較短的處理<div>它的權利（見下文）。這將加載到屏幕左側減去5px菜單<div>的條子和整個手柄<div>。我希望當鼠標懸停在任何一個部分上時，整個容器都會滑動到屏幕上，當它離開兩個部分時，屏幕就會離開屏幕。

這適用於鼠標從手柄到菜單的情況。有一個短暫的時刻，從手柄mouseleave和mouseenter從菜單中激發。我曾嘗試以.stop(true)的當前動畫對集裝箱進行動畫製作，但仍猶豫不決。

#slideout-nav包含兩個元素（和透明的空間，手柄下面，我不想觸發動畫）。
#slideout-menu-container是左邊部分。
#slideout-handle是正確的部分。

$('#slideout-menu-container').addClass('slideout-hover'); 
$('#slideout-handle').addClass('slideout-hover'); 

var slideIn = function() { 
    $('#slideout-nav').stop(true); 
    $('#slideout-nav').animate({ 
     left: '0px' 
    }); 
}; 

var slideOut = function() { 
    $('#slideout-nav').stop(true); 
    $('#slideout-nav').animate({ 
     left: distance * -1 + 'px' 
    }); 
}; 

$('.slideout-hover').hoverIntent(slideIn, slideOut); 

有沒有更好的方法來實現這個目標？

更新

HTML：

<div id="slideout-nav"> 
    <div id="slideout-handle">+</div> 
    <div id="slideout-menu-container"> 
     <ul> 
      <li><a>Home</a></li> 
      <li><a>Models</a></li> 
     </ul> 
    </div> 
</div> 

CSS：

#slideout-nav { 
    z-index: 99; 
    position: absolute; 
    top: 0; 
    width: 225px; 
} 

#slideout-handle { 
    float: right; 
    padding: 10px; 
    background: rgba(0, 0, 0, 0.8); 
} 

#slideout-menu-container { 
    overflow: hidden; 
    background: rgba(0, 0, 0, 0.8); 
    padding: 10px; 
} 

Answer 1

我想出了一個解決方案，基於對另一個question的答案。

我設置含有<div>以具有0一個height和width與overflow: visible。然後我給出了含有懸停事件的<div>。這確保了只有當鼠標進入或離開其子時（我的菜單和處理<div> s）才觸發事件。

這是後代的JSFiddle。

HTML：

<div id="container"> 
    <div id="menu">Menu</div> 
    <div id="handle">+</div> 
</div> 

JS：

var slideIn = function() { 
    $('#container').stop(true); 
    $('#container').animate({ 
     left: '0px' 
    }, 'fast'); 
}; 

var slideOut = function() { 
    $('#container').stop(true); 
    $('#container').animate({ 
     left: '-190px' 
    }, 'fast'); 
}; 


$('#container').hover(slideIn, slideOut); 

CSS：

#container { 
    width:0; 
    height:0; 
    overflow:visible; 
    position:absolute; 
    left:-190px; 
} 

#handle { 
    padding:10px; 
    width:auto; 
    height:auto; 
    background: rgba(0, 0, 0, 0.8); 
    font-size:18px; 
    color:#FFF; 
    display:inline-block; 
    border-bottom-right-radius:3px; 

} 

#menu { 
    background: rgba(0, 0, 0, 0.8); 
    width:195px; 
    height:300px; 
    float:left; 
    display:inline-block; 
    border-bottom-right-radius:3px; 
} 

Answer 2

好吧，我想我明白你的問題。我做在你的CSS的一些變化（也許它只是適合的jsfiddle需要）：

#slideout-nav { 
    z-index: 99; 
    position: absolute; 
    top: 0; 
    left: -200px; /* Here */ 
    width: 225px; 
} 

而在JS：

$('#slideout-menu-container').addClass('slideout-hover'); 
$('#slideout-handle').addClass('slideout-hover'); 

var isAnimated = false; 
var mouserOverHandle = false; 

var slideIn = function() { 
    if (!isAnimated) { 
     isAnimated = true; 
     $('#slideout-nav').animate({ 
      left: '0px' 
     }, function() {isAnimated = false;}); 
    } 
}; 

var slideOut = function() { 
    setTimeout(function() { 
     if (!isAnimated && !mouseOverHandle) { 
      isAnimated = true; 
      $('#slideout-nav').animate({ 
       left: '-200px' 
      }, function() {isAnimated = false;}); 
     } 
    }, 10); 
}; 

$('#slideout-handle').hover(function() {mouseOverHandle = true;}, function() {mouseOverHandle = false;}); 
$('.slideout-hover').hover(slideIn, slideOut); 

我加了鎖（isAnimated），以防止菜單，滑動當它已經滑動時的其他方向。

而且，我認爲它可以改進的棘手部分，我在slideOut函數中添加了一個定時器，因爲如果我們處理句柄或否，我們必須知道（當離開menu-container div時）。所以定時器只是在這裏「等待」懸停在句柄上的事件而被解僱。

沒有計時器（和mouseOverHandle var），當鼠標移過菜單容器的句柄時，菜單將滑出。如果不是您的問題，請隨時將其刪除。

查看jsFiddle here。