1

見栄えのするUIをWebアプリケーションに適用しようとしていますが、下にスライドしてフェードインするメニュー、または上にスライドしてフェードアウトするメニューが必要です。

私はこれを試しました...

if($('#Menu').css("display") == "none") {
    $('#Menu').slideDown(250).fadeIn(250);
} else {
    $('#Menu').slideUp(250).fadeOut(250);
}

...うまくいきませんでした。発生する効果は1つだけです...この方法で効果を連鎖させることが可能かどうかを誰かが説明したり、回避策を提案したりできますか？

4

1 に答える 1

0

To acheive this you'll want to use jQuery's .animate() function. Something like this;

if ($('#Menu').css('opacity') == 1) {
    $('#Menu').animate({
        opacity: 0,
        height: '0'
    }, 500, function() {
        // animation complete
    });
} else {
    $('#Menu').animate({
        opacity: 1,
        height: '200px'
    }, 500, function() {
        // animation complete
    });
}​

I think you could possibly replace the height value with 'toggle' to avoid putting in specific values. However I've not used it personally so can't be sure.

EDIT: 'toggle' seems to work fine: http://jsfiddle.net/RjESG/3/

于 2012-11-27T15:09:39.463 に答える