3

divの垂直リストがあり、ホバーでそれぞれをアニメーション化しています。選択したものが「成長」している間、残りの部分は同じ位置に留まることを望みます（言いたくないのですが、MacOSランチャーだと思います）。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 })
});
4

2 に答える 2

4

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;
}
于 2013-06-04T20:53:36.183 に答える
1

この場合は、CSS 変換を使用するのに最適なscale()ケースです。

簡単な例を次に示します: http://jsfiddle.net/LeBen/vYjNT/1/

他にもオプションがあり、トランジションでイージングを追加することもできます。

于 2013-06-04T20:53:22.600 に答える