動畫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添加一些緩解。