0

これらの 2 つのフライアウト メニューは、丁重に上下に切り替えます。彼らが出ているときは、互いに重なり合っている同じスペースを占有します。見た目は悪くありませんが、他のメニューをクリックして開いたときに、開いているメニューが閉じられた方がよいでしょう。将来的には、2 つ以上のメニューが存在する可能性があります。そのため、メニューを開くと、開いているメニューを同時に閉じるソリューションが必要です。それらを関連付けるクラスが必要になると思います。その時点で開こうとしているメニューを閉じずに、開いている他のメニューを閉じる方法がわかりません。それが理にかなっていることを願っています。

showFooWindow = function() {
$('.channels-sessions-tab').click(function(){
    var $CSpane = $('.current-foo');

    var paneState = parseInt($CSpane.css('left'),10) == 0 ? -$CSpane.outerWidth()-11 : 0

    $CSpane.animate({
        left: paneState
    }, {
        duration: 700,
        specialEasing: {
            width: 'linear',
            height: 'easeOutBounce'
        }});
});
};

showBarWindow = function() {
$('.channel-session-tab').click(function(){
    var $CSpane = $('.current-bar');

    var paneState = parseInt($CSpane.css('top'),10) == 0 ? -$CSpane.outerHeight()-11 : 0

    $CSpane.animate({
        top: paneState
    }, {
        duration: 600,
        specialEasing: {
            width: 'linear',
            height: 'easeOutBounce'
        }});
});
};
4

2 に答える 2

0

これが最終的に私が思いついたものです。flowOuRight と flynOutDown を抽象化する巧妙な方法を考え出すのは素晴らしいことです。そうすれば、数行のコードを削除できます。

showFoo = function() {
$('.foo-tab').click(function(){
    var duration = 700;
    var element = $('.foo');
    var direction = {left: parseInt(element.css('left'),10) == 0 ? -element.outerWidth()-11 : 0};
    closeOtherFlyouts();
    element.addClass("flownOutRight");
    flyoutAnimate(direction, duration, element);
});
};

showBar = function() {
$('.bar-tab').click(function(){
    var duration = 600;
    var element = $('.bar');
    var direction = {top: parseInt(element.css('top'),10) == 0 ? -element.outerHeight()-11 : 0};
    closeOtherFlyouts();
    element.addClass("flownOutDown");
    flyoutAnimate(direction, duration, element);
});
};

closeOtherFlyouts = function() {
if ($('.flownOutDown')) {
    var duration = 600;
    var element = $('.flownOutDown');
    var direction = {top: -element.outerHeight()-11};
    flyoutAnimate(direction, duration, element);
    element.removeClass("flownOutDown");
}

if ($('.flownOutRight')) {
    var duration = 700;
    var element = $('.flownOutRight');
    var direction = {left: -element.outerWidth()-11} ;
    flyoutAnimate(direction, duration, element);
    element.removeClass("flownOutRight");
}
};

flyoutAnimate = function(direction, duration, element) {
element.animate(
    direction,
    {
        duration: duration,
        specialEasing: {
            width: 'linear',
            height: 'easeOutBounce'
        }});
};
于 2013-03-01T21:50:58.640 に答える
0

次のようなものを追加してみてください。

$(".flownOut")./*close your flyouts*/.removeClass(".flownOut");
$CSpane.addClass("flownOut");
$CSpane.animate({
        left: paneState
    }, { .... the rest of your code
于 2013-03-01T18:01:47.363 に答える