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

这是使用jQuery的display:none方法切换toggle()的一种非常简单的方法。我使用了fadeToggle，因为你提到了想要淡入淡出，但你可以使用切换并设置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个事件。

它将代码缩减为：小提琴：https://jsfiddle.net/f1dshffs/3/

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

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

buttons.click(toggleDivs);

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

1 个答案: