Fade out elements then fade in selected

Question

I've been trying to write a function that fades out all of my elements and then fades in the selected one only I can't get it working for some reason.

I've used other articles on SO only it hasn't seemed to have helped.

Can anybody point me int he right direction?

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

The selector is incorrect, prefix . with selected item selector, then class selector can be used.

Also, you should use complete callback method of .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

Answer 2

The problem is that you're not using the right selector.

This uses the exact same code but fixes your problem which is the missing selector which was the . before the variable item

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