jQuery 切换淡入淡出：切换时无法 div 淡入淡出 out/in

Question

当我点击黑色按钮时，红色 div 淡出，蓝色 div 淡入。但是，当我第二次点击黑色按钮将其切换回来时，有没有褪色 out/in。我怎样才能使蓝色 div 淡出而红色 div 淡入？

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

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

Answer 2

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

之前使用 .finish()

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

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

和

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

Updated Fiddle

完成演示：

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);
  }
});

#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;
}

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

Answer 3

我修好了。 fadeOut、fadeIn 后不需要添加 show 和 hide : 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);

        }

jQuery 切换淡入淡出：切换时无法 div 淡入淡出 out/in

jQuery toggle fade: Can't get div to fade out/in on toggle

javascript

css

jquery