使用多个按钮一次显示一个div

Question

使用Foundation 6作为框架，我想在按下按钮时在两个divs之间实现淡入淡出效果。

我想做的效果是单击button1时， div2将隐藏并淡出（如果可见），并且div1将显示并淡入，反之亦然。

这是我的Javascript代码：

var $button1 = $('#button1');
var $button2 = $('#button2');

var $div1 = $('#div1');
var $div2 = $('#div2');

$button1.click(function() {
  if ($div2.is(':visible')) {
    MotionUI.animateOut($div2, 'fadeOut');
    MotionUI.animateIn($div1, 'fadeIn');
  }
  else {
    $div1.show();
  }
});

$button2.click(function() {
  if ($div1.is(':visible')) {
    MotionUI.animateOut($div1, 'fadeOut');
    MotionUI.animateIn($div2, 'fadeIn');
  }
  else {
    $div2.show();
  }
});

我已经用一个按钮使div1和div2在两者之间淡入/淡出，但是当使用多个按钮时，似乎无法使它工作。

Answer 1

这是切换display:none的一种非常简单的方法display:none使用jQuery的toggle()方法。 因为您提到要淡入淡出，所以我使用了fadeToggle，但是您可以使用toggle并设置css3过渡。

保持代码超级简单-匹配您所拥有的-这就是您要这样做的方式：小提琴： https ：//jsfiddle.net/f1dshffs/2/

var $button1 = $('#button1');
var $button2 = $('#button2');

var $div1 = $('#div1');
var $div2 = $('#div2');


var toggleDivs = function(){
    $div1.fadeToggle();
    $div2.fadeToggle();
};

$button1.click(toggleDivs);
$button2.click(toggleDivs);

现在，您可以执行一些操作来优化代码，方法是按类而不是ID进行选择，然后仅将1个事件添加到对象数组中。

它将代码减少为：Fiddle： https ://jsfiddle.net/f1dshffs/3/

var buttons = $('.button');
var divs = $('.div');

var toggleDivs = function(){
    divs.fadeToggle();
};

buttons.click(toggleDivs);