2

このフィドルを見てください

http://jsfiddle.net/rabelais/43J77/1/

$('#contact').click(function () {
    $('#contact-info').animate({
        width: 'toggle'
    });
    $('#work-menu').fadeOut('100');
});
$('#menu').click(function () {
    $('#work-menu').animate({
        width: 'toggle'
    });
    $('#contact-info').fadeOut('100');
});

ワンクリックすると、メニューが横からスムーズにスライドします。ワンクリックでメニューが開きますが、メール要素のようにスライドしません。電子メール要素のように作業メニューをスライドして開く方法を知っている人はいますか?

ありがとうございました

4

1 に答える 1

3

これを見てください：http://jsfiddle.net/43J77/4/

私widthはあなたのを変更し、このスタイル#work-menuを追加しました:#work-menu ul

#work-menu {
    position: fixed;
    bottom: 37px;
    left: 65px;
    font-size: 24px;
    width: 183px;  /*changed*/
}
#work-menu ul{  /*added*/
    float:right;
}

違いは、トグルされた要素の 1 つはテキストが左に配置され (電子メール)、ユーザーは左にスライドしているため、その効果が発生し、もう 1 つの要素ではリストは左に配置されていますが、右。このように、テキストは動いていないように見えますが、表示されているだけです。

同じ視覚効果を作成するために、リストを右揃えにしましたwidth。そのためには、親要素に を定義する必要がありました。

于 2013-09-19T13:47:19.350 に答える