FadeIn和FadeOut效果切换到切换框

Question

http://codepen.io/anon/pen/Nqbdap

伙计们，我制作了这个简单的代码并且他出了点问题，我无法解决原因。

在第一次切换更改时，方框1将在没有fadeOut效果的情况下消失，它们将正常工作。

代码：

＆＃13;

＆＃13;

  var clickHandler = function(e) {
    var target = $(this).data('open');
    var box = $('.box');
    var active = 'box__active';
	
    if (!(box.eq(target).hasClass(active))) {
      box
      .fadeOut(500, function() {
				box.removeClass(active)
      });

      box.eq(target)
      .delay(500).fadeIn(500, function() {
        box.eq(target).addClass(active);
      });
    }
    
    
    
    e.preventDefault();
  };

  $(document).on('click', '[data-open]', clickHandler);

＆＃13;

.box {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: none;
}
.box__active {
  display: inline-block;
}
a {
  cursor: pointer;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>

<a data-open="0">Open one</a><br/>
<a data-open="1">Open two</a><br/>
<a data-open="2">Open three</a><br/>
<br/>
<br/>
<br/>
<div class="box box__one box__active">One</div>
<div class="box">Two</div>
<div class="box">Three</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为你应该知道jquery开始索引中的.eq（），0不是1 ..所以如果我理解你应该使用

 var target = $(this).data('open') - 1;

并且为了更好的代码使用.parseInt

var target = parseInt($(this).data('open')) - 1;

DEMO HERE

您只需要使用$(this)

$(this).removeClass(active);
$(this).addClass(active);

DEMO HERE

Answer 2

我改变了你的代码。现在它正在第一时间工作。

  var clickHandler = function(e) {
    var target = $(this).data('open');
    var box = $('.box');
	
    box.fadeOut(500);
    box.eq(target).delay(500).fadeIn(500);
    
    e.preventDefault();
  };

  $(document).on('click', '[data-open]', clickHandler);

.box {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: none;
}
a {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>

<a data-open="0">Open one</a><br/>
<a data-open="1">Open two</a><br/>
<a data-open="2">Open three</a><br/>
<br/>
<br/>
<br/>
<div class="box" style="display:inline-block;">One</div>
<div class="box">Two</div>
<div class="box">Three</div>