3

スライド アウト div 関数を作成しようとしています。基本的に、これは長方形のイメージ マップです。マップ上の場所をクリックすると、DIV が右からスライドしてマップ全体をカバーします。複数の場所 (つまり、複数の DIV) に対してこれを行う必要があります。

jQuery からいくつかの関数を試してみましたが、うまくいきませんでした。トグル効果では上下の動きしかできず、.animate 効果を思うように動作させることができません。

このJfiddleは私が必要とするものに近いですが、新しい DIV がスライドインする前にアクティブな DIV をスライドアウトさせようとしています (また、MAP DIV は常に静的なままにする必要があるため、DIV がスライドアウトすると、マップの前にマップが表示されます)。新しい div スライドイン)。

これはJfiddleの内容です：

jQuery(function($) {

    $('a.panel').click(function() {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active');

        if (!$target.hasClass('active')) {
            $other.each(function(index, self) {
                var $this = $(this);
                $this.removeClass('active').animate({
                    left: $this.width()
                }, 500);
            });

            $target.addClass('active').show().css({
                left: -($target.width())
            }).animate({
                left: 0
            }, 500);
        }
    });
});​
4

2 に答える 2

0

Don Boots、あなたが持っていたものは私が探していたものに近かった - しかし、私はより良い解決策を見つけたと思う：

$(document).ready(function () {
var visible=true;
$("#test").on('click', function() { 
    $('.t1').animate({width: visible ? 300 : 0}, "slow");
     visible=!visible;  }); 
 $("#test2").on('click', function() { 
    $('.t2').animate({width: visible ? 300 : 0}, "slow");
     visible=!visible;         
});
$("#close").on('click', function() { 
    $('.common').animate({width: visible ? 0: 0}, "slow");
     visible=!visible;         
});

</p>

Jフィドル

于 2012-11-20T15:58:11.340 に答える