淡出元素然后淡入選中

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

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

選擇器不正確，前綴. 如果選擇了項目選擇器，則可以使用類選擇器。

另外，您應該使用.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');
    });
});

小提琴