Question

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

我从jQuery尝试了一些功能而没有运气。切换效果只允许向上或向下运动，而我无法使.animate效果按照我想要的方式工作。

这Jfiddle接近我需要的但是我试图让活动的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);
        }
    });
});

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保持原始地图div（#target1）显示。 CSS有点多余，但考虑到这种方法，它可以完成工作。
更新＃2 更新了小提琴链接。我的印象是它在保存时更新了。糟糕。

Answer 2

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;         
});

JFiddle

jQuery水平切换Div

2 个答案: