0

私はこれをフィドルに持っています、そしてそれは私が望むものにかなり近いです、しかしいくつかの問題があります。まず、メニューが完全な高さに達すると、内側のメニューの上部が消えます。第二に、メニューが遷移しているときにマウスを出し入れすると、メニューが停止します。（私が欲しいのは、あなたがそれに戻ったとき、それはあなたのマウスがそこにいる間だけ拡大して戻り、そしてあなたのマウスが出ると崩壊を再開することです）。

.stop（）を削除すると、私が言いたかったことではなく、踊ることができます。

編集：欠落している上部は、ピラーボディにパディングを追加することで修正されました（ビューに影響を与えない場合でも、修正されます。奇妙です）。ただし、メニューが折りたたまれているため、再入力するとメニューが停止します。

さらに編集：slideUpとslideDownの代わりにslideToggleに切り替えることで、メニューが停止する問題を修正しました。

これがhtmlです：

<div id="mission-statement-container">
<div class="pillars">
    <div class="pillars-body">
        <div><span class="pillar-indicator"></span><span class="pillar-text">First Pillar</span>
        </div>
        <div><span class="pillar-indicator"></span><span class="pillar-text">Second Pillar</span>
        </div>
        <div><span class="pillar-indicator"></span><span class="pillar-text">Third Pillar</span>
        </div>
        <div><span class="pillar-indicator"></span><span class="pillar-text">Fourth Pillar</span>
        </div>
        <div><span class="pillar-indicator"></span><span class="pillar-text">Fith Pillar</span>
        </div>
        <div><span class="pillar-indicator"></span><span class="pillar-text">Sixth Pillar</span>
        </div>
        <div><span class="pillar-indicator"></span><span class="pillar-text">Seventh Pillar</span>
        </div>
        <div><span class="pillar-indicator"></span><span class="pillar-text">Eighth Pillar</span>
        </div>
    </div>
    <div class="pillars-demo">PILLARS</div>
</div>

そしてjavascript：

$(".pillars-body").hide();
$(".pillars").hover(function () {
    $(".pillars-body").stop().slideDown();
}, function () {
    $(".pillars-body").stop().slideUp();
});

そして、適切な測定のためのCSS：

.pillar-indicator {
    display: inline-block;
    height: 15px;
    width: 15px;
    margin-left: 20px;
    margin-right: 15px;
    background: yellow;
    }
.pillars-body {
    background: black;
    color: white;
}
.pillars-body div {
    margin-top: 10px;
}
.pillars {
    position: absolute;
    top: 0;
    left: 0;
}
.pillars-demo {
    float: left;
}

さらに注意：マウスを展開中にメニューの外に移動し、折りたたんだ後に再びメニューに戻って再度展開すると、完全に展開すると上部が非表示にならないことに気づきました。それは何かを意味します。

4

3 に答える 3

1

.pillars-bodyにpadding-topを追加すると、探しているものが得られるはずです。

于 2013-03-21T19:55:15.430 に答える
0

このクラスの場合：

pillars-body div {
    margin-top: 10px;
}
于 2013-03-21T19:56:15.123 に答える
0

アニメーションを修正するために、stopメソッドに次の引数を追加してみてください。

.stop('true',true, true)

http://jsfiddle.net/mCPvp/

更新：gatebasher_311が45秒で私を打ち負かしたようです:)

于 2013-03-21T20:16:21.730 に答える