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

Posted 2023-05-08

【中文标题】动画列表中的 div，保持兄弟姐妹静态

【英文标题】：Animate div in list, keep siblings static

【发布时间】：2013-05-31 09:27:24

【问题描述】：

我有一个垂直的 div 列表，我在悬停时为每个 div 设置动画。我希望其他人在选定的“成长”时保持相同的位置（我不想这么说，但想想 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 )
);

【参考方案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;

【讨论】：

太棒了，但是我如何让左侧保持静止？就像菜单位于屏幕的左边缘一样，我不希望按钮的左侧移出屏幕边界。

您可以使用CSS transforms 移动东西而不影响兄弟姐妹。我会留给你去发现:)

好吧，我认为它是变换起源，但我无法让它工作：jsfiddle.net/bttah/6

不要假设。它让你大吃一惊......哦，我会为你做些什么：jsfiddle.net/bttah/8

所以如果我调整比例我只需要猜测变换？

【参考方案2】：

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

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

有more options available，您还可以使用transitions 添加一些缓动。