jQuery Toggle Div Horizontaly

我试图创建一个幻灯片div功能。基本上，这是一个矩形形状的地图 - 当你点击地图上的一个位置时，DIV从右侧滑出以覆盖整个地图。我需要为多个位置（即多个DIV）执行此操作。jQuery Toggle Div Horizontaly

我尝试了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); 
    } 
});

}）;

有什么想法？

来源

2012-11-20 Anthony A

我发现这解决方案：http://jsfiddle.net/vHJj7/24/ 这是设置多个DIV的最佳方式吗？我将有超过25个DIV ... –

为什么你不使用jQuery toggle/slideToggle函数？ – gotqn

因为，据我所知，这些功能不允许水平移动。只能上下或淡入/淡出。 –

根据您的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，以保持原有的地图格（＃目标1）显示。 CSS有点多余，但考虑到方法，它完成了工作。
更新＃2 更新的小提琴链接。我在保存更新的印象之下。哎呀。

来源

2012-11-20 14:59:05

太棒了！这比我提出Don的方法要好得多。它更干净，如果我要添加位置，因为我不必编辑实际的jQuery脚本。太棒了！谢谢！ –

唐靴，你有什么是接近我一直在寻找的 - 但我想我找到了一个更好的解决方案：

$(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

来源

2012-11-20 15:58:11

这也是一个好方法。我确实注意到，点击地图细节1和地图细节2（反之亦然）时会有一些不一致的地方。 –

jQuery Toggle Div Horizo​​ntaly

回答

相关问题

jQuery Toggle Div Horizontaly