jQuery 水平切换 Div

Question

我正在尝试创建一个滑出 div 功能。基本上，它是一个矩形图像 map - 当您单击 map 上的某个位置时，一个 DIV 从右侧滑出以覆盖整个 map 。我需要对多个位置(即多个 DIV)执行此操作

我尝试了 jQuery 的一些函数，但没有成功。切换效果仅允许向上或向下运动，并且我无法让 .animate 效果按我想要的方式工作。

这个Jfiddle接近我需要的，但我试图让事件的 DIV 在新的 DIV 滑入之前滑出(并且 MAP DIV 应始终保持静态，因此当 DIV 滑出时，您会在新的 div 之前看到 map 滑入)。

这是 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);
        }
    });
});​

Answer 1

根据你的 jQuery 片段，我想出了

$(document).ready(function() {
    $('div.panel').css('left', '-200px');

    $('a.panel').click(function() {
        var a = $(this);
        var p = $(a.attr('href'));
        var pw = p.width();

        //-- if we have an active panel, hide it. otherwise, just show target
        if ($('div.panel').hasClass('active')) {
            //-- reset all panels
            $('div.panel').animate({
                left: -pw
            }, 500, function() {
                //-- when that is complete, move target panel to position
                p.addClass('active').show().animate({
                    left: 0
                });
            });
        } else {
            p.addClass('active').show().animate({
                left: 0
            });
        }
    });
});

更新了 jsFiddle: http://jsfiddle.net/rs2QK/982/

• 更新#1 CSS/HTML 保持原始 map div (#target1) 显示。 CSS 有点多余，但考虑到这种方法，它可以完成工作。

• 更新 #2 更新了 fiddle 链接。我的印象是它在保存时更新了。哎呀。