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

Answer 2

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