动画div在列表中，保持兄弟姐妹静态

Question

我有一个垂直列表的divs，我在悬停时动画每个。我希望其他人保持在同一个位置，而选择的“增长”（我讨厌这么说，但是想到MacOS Launcher）。我知道我可以做到这一点，如果我绝对使用JavaScript循环定位每一个，但我希望这样做尽可能动态。

想法？

HTML：

<div id="leftMenu"> 
    <div id="lmHome" class="lmSelected"><i class="icon-home icon-2x"></i></div> 
    <div id="lmSearch"><i class="icon-search icon-2x"></i></div> 
    <div id="lmFeed"><i class="icon-rss icon-2x"></i></div> 
    <div id="lmPeople"><i class="icon-group icon-2x"></i></div> 
    <div id="lmNew"><i class="icon-plus icon-2x"></i></div> 
    <div id="Div2"><i class="icon-calendar icon-2x"></i></div> 
    <div id="lmSettings"><i class="icon-cogs icon-2x"></i></div> 
    <div id="Div1"><i class="icon-question icon-2x"></i></div> 
</div> 

CSS：

#leftMenu { /* The container for the buttons on the left menu*/ 
    position: absolute; 
    left: 10px; 
    padding-top: 10px; 
    height: auto; 
} 

#leftMenu div { /* The buttons on the left menu*/ 
    position: relative; 
    top: 0px; 
    height: 50px; 
    width: 50px; 
    border: 1px solid gray; 
    text-align: center; 
    overflow: visible; 
} 

#leftMenu div i { 
    position: relative; 
    top: 12px; 
} 

#leftMenu div:hover { 
} 

#leftMenu div:last-child { 
    border-bottom: 1px solid gray; 
} 

的JavaScript：

$('#leftMenu div').on('mouseenter', function() { 
    var self = $(this); 
    self.stop() 
     .animate({ 'height': '+=10px' }, { duration: 100, queue: false }) 
     .animate({ 'width': '+=10px' }, { duration: 100, queue: false }) 
     .animate({ 'top': '-=5px' }, { duration: 100, queue: false }) 
}); 

$('#leftMenu div').on('mouseleave', function() { 
    var self = $(this); 
    self.stop() 
     .animate({ 'height': '-=10px' }, { duration: 400, queue: false }) 
     .animate({ 'width': '-=10px' }, { duration: 400, queue: false }) 
     .animate({ 'top': '+=5px' }, { duration: 400, queue: false }) 
}); 

Answer 1

http://jsfiddle.net/bttah/

使用了合适的工具。 JavaScript在给予旧式浏览器2到3年前令人兴奋的动画功能的同时，并不适用于动画，因此我在这里举例说明如何使用3行额外的CSS实现动画。

#leftMenu { /* The container for the buttons on the left menu*/ 
    position: absolute; 
    left: 10px; 
    padding-top: 10px; 
    height: auto; 
} 

#leftMenu div { /* The buttons on the left menu*/ 
    position: relative; 
    top: 0px; 
    height: 50px; 
    width: 50px; 
    border: 1px solid gray; 
    text-align: center; 
    overflow: visible; 
    background: #fff; 

    -webkit-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 

#leftMenu div i { 
    position: relative; 
    top: 12px; 
} 

#leftMenu div:hover { 
    -webkit-transform: scale(2); 
    transform: scale(2); 
    z-index: 100; 
} 

#leftMenu div:last-child { 
    border-bottom: 1px solid gray; 
} 

Answer 2

这是使用CSS转换，scale()在这种情况下，完美的情况。

这里有一个简单的例子：http://jsfiddle.net/LeBen/vYjNT/1/

有more options available，你也可以用transitions添加一些缓解。