要素をフェードアウトして選択をフェードイン

Question

私はすべての要素をフェードアウトさせてから、選択した要素をフェードインする機能を作成しようとしていましたが、何らかの理由で機能しません。

私は他の記事を使用していますので、役に立たなかったようです。

誰かが私に正しい方向を教えてもらえますか？

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

セレクタは、クラスセレクタを使用することができ、選択された項目選択と接頭.正しくありません。

また、あなたは、問題は、あなたが右のセレクターを使用していないということです.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

を使用する必要があります。

これはあなたが持っているしたい場合があります更新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>