javascript - 淡出元素然后淡入所选

Question

我一直在尝试编写一个函数来淡出我的所有元素，然后淡入所选元素，但由于某种原因我无法让它工作。

我使用了其他关于 SO 的文章，但似乎没有帮助。

谁能给我指出正确的方向？

https://jsfiddle.net/mL329edr/

$('.vacancy-title a').on('click', function(e){
    e.preventDefault();
    var item = $(this).attr('data-dept') + '-verticals';
    $.when($('.vertical').fadeOut('slow')).done(function () {
        alert(item);
        $(item).fadeIn('slow');
    });
});

Answer 1

问题是您没有使用正确的选择器。

这使用完全相同的代码，但解决了您的问题，即变量 item 之前缺少的选择器 .

更新JSFiddle

$('.vacancy-title a').on('click', function(e) {
  e.preventDefault();
  var item = $(this).attr('data-dept') + '-verticals';
  $.when($('.vertical').fadeOut('slow')).done(function() {
    $('.' + item).fadeIn('slow');
  });
});

.vertical {
  display: none;
}
.vertical:first-child {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Vacancies -->
<section class="vacancies">
  <div class="row">
    <div class="inner">
      <nav class="vacancy-title">
        <ul>
          <li><a href="#" data-dept="design">Design</a>
          </li>
          <li><a href="#" data-dept="seo">SEO</a>
          </li>
          <li><a href="#" data-dept="development">Development</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="row">
    <div class="inner">
      <div class="vacancy-verticals">

        <!-- Design -->
        <div class="design-verticals vertical">dessssign
          <div class="columns small-12 large-4">
            <article>
              <header>
                <h3 itemprop="title">Front End Designers</h3>
              </header>
            </article>
          </div>
          <div class="columns small-12 large-4">
            <article>
              <header>
                <h3 itemprop="title">Front End Designers</h3>
              </header>
            </article>
          </div>
          <div class="columns small-12 large-4">
            <article>
              <header>
                <h3 itemprop="title">Front End Designers</h3>
              </header>
            </article>
          </div>
        </div>

        <!-- SEO -->
        <div class="seo-verticals vertical">

          <div class="columns small-12 large-4">
            <article>
              <header>
                <h3 itemprop="title">Front End Designers</h3>
              </header>
            </article>
          </div>
          <div class="columns small-12 large-4">
            <article>
              <header>
                <h3 itemprop="title">Front End Designers</h3>
              </header>
            </article>
          </div>
          <div class="columns small-12 large-4">
            <article>
              <header>
                <h3 itemprop="title">Front End Designers</h3>
              </header>
            </article>
          </div>

        </div>

        <!-- DEV -->
        <div class="development-verticals vertical">
          <div class="columns small-12 large-4">
            <article>
              <header>
                <h3 itemprop="title">Front End Designers</h3>
              </header>
            </article>
          </div>
          <div class="columns small-12 large-4">
            <article>
              <header>
                <h3 itemprop="title">Front End Designers</h3>
              </header>
            </article>
          </div>
          <div class="columns small-12 large-4">
            <article>
              <header>
                <h3 itemprop="title">Front End Designers</h3>
              </header>
            </article>
          </div>
        </div>

      </div>
    </div>
  </div>
</section>
<!-- Vacancies -->


</div>