3

我正在尝试创建一个滑出 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);
        }
    });
});​
4

2 回答 2

2

根据您的 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 更新了小提琴链接。我的印象是它在保存时更新。哎呀。

于 2012-11-20T14:59:05.070 回答
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>

提琴手

于 2012-11-20T15:58:11.340 回答