淡出的元素，然後淡入選中

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

該選擇不正確，前綴.與選定項目選擇器，則可以使用類選擇。

此外，你應該使用的.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

的問題是，你不使用正確的選擇。

這將使用完全相同的代碼，但解決您的問題，就是缺少選擇這是之前變量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>