後div動畫仍然落後於其他div

情況：我有3個div的 | left | center | right | 我左邊有3個div，右邊有3個div。當我通過這6個div中的任何一個時，它們會增加寬度。右側是可以的，但左側，當它增長時，仍然在中心div後面。後div動畫仍然落後於其他div

更容易看到：將鼠標移到左側菜單上，您仍然可以在中心div中看到文本。這種行爲不會發生在右側。

<div class="wrapper"> 
     <div class="menu_left"> 
      <div class="item_left"> </div> 
      <div class="item_left"> </div> 
      <div class="item_left"> </div> 
     </div> 

     <div class="central">XXXXXXXX XXXXXXX</div> 

     <div class="menu_right"> 
      <div class="item_right"> </div> 
      <div class="item_right"> </div> 
      <div class="item_right"> </div> 
     </div> 
    </div> 
<script> 
    //$("div").fadeIn(3500); 

    $(".item_left").mouseenter(function() { 
     $(this).animate({ width: "240px"}, 350); 

    }); 
    $(".item_left").mouseleave(function() { 
     $(this).animate({ width: "100px" }, 350); 
    }); 
    $(".item_right").mouseenter(function() { 
     $(this).animate({ width: "240px"}, 350); 
    }); 
    $(".item_right").mouseleave(function() { 
     $(this).animate({ width: "100px" }, 350) 
    }); 
</script>

http://jsfiddle.net/lcssanches/E7B3t/1/

編輯：

左側菜單：我想避免這種情況
left_menu

右鍵菜單：正確！
roght_menu

來源

2013-03-19 lcssanches

對我有幫助。你確定你的原創是正確的？另外，當你可以的時候，你可能會考慮去css3。少線。更好的性能。有些東西仍然不能很好地使用'auto'' height'和'width's – 2013-03-19 03:11:27

好吧，我會更多地關注css3。但看到圖像請。 – lcssanches 2013-03-19 03:23:52

通過下面的CSS代碼來看，似乎你想要的左/右項目覆蓋中央div，只有你的錯誤是一個拼寫一個 - postion:應該position:

div.menu_left,div.menu_right{ 
    postion: relative; 
    margin:0; 
    padding:0; 
    display:inline-block; 
    width: 100px; 
    height: 100%; 
}

請參閱http://jsfiddle.net/E7B3t/3/

來源

2013-03-19 03:22:11 Cue

令人難以置信......謝謝你的傢伙！ – lcssanches 2013-03-19 03:26:26

後div動畫仍然落後於其他div

回答

相關問題