[英]Fade out elements then fade in selected
我一直在尝试编写一个函数,该函数淡出我所有的元素,然后淡入所选元素,只是由于某种原因我无法使其正常工作。
我在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');
});
});
问题是您没有使用正确的选择器。
这使用完全相同的代码,但解决了您的问题,即缺少选择器.
在可变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>
选择器不正确,前缀.
如果选择了项目选择器,则可以使用类选择器。
另外,您应该使用.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');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.