淡出元素然后淡入选中

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

＆＃13;

＆＃13;

$('.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');
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

选择器不正确，前缀.和选定的项目选择器，然后可以使用类选择器。

此外，您应该使用.fadeOut(duration, [complete])的完整回调方法，

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

Fiddle