在fadeIn前面添加fadeOut
Add fadeOut in front of fadeIn
我使用这个脚本来过滤基于类的元素。目前它会停止以前的函数并在新类中淡出。
基本上我需要在它开始淡出选择器之前淡出一切。目前,它是一个从100%不透明度到开始淡出选择器的锐切,我想要平滑地淡出当前(或特定类),然后在这个中淡出。
我的代码:$('div.tags').delegate('input[type=radio]', 'change', update);
update();
function update() {
var $lis = $('.results > div'),
$checked = $('input:checked');
if ($checked.length) {
var selector = $checked.map(function () {
return '.' + $(this).attr('rel');
}).get().join('');
$lis.hide().filter(selector).stop().fadeIn(1000, 'easeInCirc');
} else {
$lis.stop().fadeIn(1000, 'easeInCirc');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tags">
<label class="odseba">
<input class="fadeout" type="radio" checked="checked" rel="all" name="gg" /><span>VŠETKO</span></label>
<label class="odseba">
<input type="radio" rel="web" name="gg" /><span>WEB</span></label>
<label class="odseba">
<input type="radio" rel="eshop" name="gg" /><span>ESHOP</span></label>
<label class="odseba">
<input type="radio" rel="seo" name="gg" /><span>SEO</span></label>
<label class="odseba">
<input type="radio" rel="grafika" name="gg" /><span>GRAFIKA</span></label>
<label class="odseba">
<input type="radio" rel="logo" name="gg" /><span>LOGO</span></label>
<label class="odseba">
<input type="radio" rel="reklama" name="gg" /><span>REKLAMA</span></label>
<label class="odseba">
<input type="radio" rel="kampan" name="gg" /><span>KAMPAŇ</span></label>
<label class="odseba">
<input type="radio" rel="branding" name="gg" /><span>BRANDING</span></label>
<label class="odseba">
<input type="radio" rel="print" name="gg" /><span>PRINT</span></label>
</div>
and these are idems being filtered:
<div class="span4 thumb-pad0 all web eshop print seo">
<div class="thumbnail">
<figure><a href="img/img5.jpg"><img src="img/page3_pic5.jpg" alt=""></a></figure>
<div class="caption">
<h2 style="font:28px/28px 'Century Gothic', 'Century Gothic', Arial, Helvetica, Century Gothic; color:#FFF; text-transform:uppercase; margin:0;">Name</h2>
<p>lorem ipsum</p>
</div>
</div>
</div>
将fadeIn()作为回调传递给fadeOut():
} else {
$("elements-to-fade-out").fadeOut(1000, "easeInCirc", function() {
$lis.stop().fadeIn(1000, 'easeInCirc');
});
}
你也可以这样做:
} else {
$("elements-to-fade-out").fadeOut(1000, "easeInCirc");
// Fade in after 1000
//
setTimeout(function() {
$lis.stop().fadeIn(1000, "easeInCirc");
}, 1000);
}
查看这里的回调信息:
http://www.w3schools.com/jquery/eff_fadein.asp
淡出所有元素,然后使用回调函数淡出特定元素:
$lis.fadeOut(1000, 'easeInCirc', function(){
$(this).filter(selector).fadeIn(1000, 'easeInCirc');
});
http://plnkr.co/edit/0wkJGOgK3hxIfLX3RqKF?p = info
相关文章:
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 如何在映射数组中添加换行符
- 正在将数据主题添加到所有项目
- ZeroClipboard-在复制之前添加到值
- 我可以在json对象中添加一个函数吗
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 如何添加浮动和非浮动,其他
- 添加文字和评论功能更新Div
- 如果使用 lodash 将属性存在于另一个对象中,则向对象添加属性
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 在函数中添加数组元素的数值
- 如何将歌曲添加到jPlayer
- 在html Select中添加搜索
- Java脚本时间添加
- 在fadeIn前面添加fadeOut
- 在作为基于类的过滤器的脚本中,在fadeIn之前添加fadeOut
- 在sticky.js中添加fadeOut
- 将fadeIn/fadeOut添加到表结果中
- 添加跳过按钮快速前进.fadein /.fadeout