jQuery toggle fade：无法让div在淡出或淡入切换

Question

当我点击黑色按钮时，红色div淡出并且蓝色div淡入。但是，当我再次单击黑色按钮将其切换回来时，没有淡出/淡出。如何才能使蓝色div消失，红色div重新消失？

小提琴：http://jsfiddle.net/ddac5391/1/

HTML

<a id="contact-button" href="#">Get in touch</a>

<div id="primary"></div>
<div id="contact-keebs"></div>

CSS

#contact-button {
    background: #000;
    background-size: 24px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
#primary {
    background: red;
    height: 200px;
    position: absolute;
    width: 200px;
}
#contact-keebs {
    background: blue;
    display: none;
    height: 200px;
    position: absolute;
    width: 200px;
}

JS

var c = 0;
$('#contact-button').click(function (e) {

    e.preventDefault();

    if (c++ % 2 == 0) {

        $(this).addClass('work-button').text('Work');
        $('body').addClass('contact-content');
        $('#contact-keebs').stop().fadeIn(500).show();

    } else {

        $(this).removeClass('work-button').text('Get in touch');
        $('body').removeClass('contact-content');
        $('#contact-keebs').stop().fadeOut(500).hide();

    }
});

Answer 1

删除.show()和.hide();并让fadeIn / fadeOut动画完成（在停止动画之前）.finish()之前使用.stop()。

如果您不使用.finish()，div有时会卡在不透明度为1的点上。 Demo（尝试快速点击）展示这一点。

$('#contact-keebs').finish().stop().fadeIn(500);

和

$('#contact-keebs').finish().stop().fadeOut(500);

的 Updated Fiddle

完成演示：

＆＃13;

＆＃13;

var c = 0;
$('#contact-button').click(function(e) {
  e.preventDefault();
  if (c++ % 2 == 0) {
    $(this).addClass('work-button').text('Work');
    $('body').addClass('contact-content');
    $('#contact-keebs').finish().stop().fadeIn(500);
  } else {
    $(this).removeClass('work-button').text('Get in touch');
    $('body').removeClass('contact-content');
    $('#contact-keebs').finish().stop().fadeOut(500);
  }
});

＆＃13;

#contact-button {
  background: #000;
  background-size: 24px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  padding: 10px 20px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
#primary {
  background: red;
  height: 200px;
  position: absolute;
  width: 200px;
}
#contact-keebs {
  background: blue;
  display: none;
  height: 200px;
  position: absolute;
  width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="contact-button" href="#">Get in touch</a>
<div id="primary"></div>
<div id="contact-keebs"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我解决了。你不需要在fadeOut之后添加show和hide，fadeIn：http://jsfiddle.net/ddac5391/6/

if (c++ % 2 == 0) {

            $(this).addClass('work-button').text('Work');
            $('body').addClass('contact-content');
            $('#contact-keebs').stop().fadeIn(500);

        } else {

            $(this).removeClass('work-button').text('Get in touch');
            $('body').removeClass('contact-content');
            $('#contact-keebs').stop().fadeOut(500);

        }

Answer 3

应为$('#contact-keebs').stop().fadeOut(500).show();