在fadeIn前面添加fadeOut答案

【问题标题】：Add fadeOut in front of fadeIn在fadeIn前面添加fadeOut
【发布时间】：2016-09-21 20:47:46
【问题描述】：

我使用这个脚本来过滤基于类的元素。目前它会停止以前的功能并淡入新的类。

基本上我需要在它开始淡入选择器之前淡出所有内容。目前它是从 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>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

将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

【讨论】：

显然您需要将fadeOut() 的选择器更改为您想要应用淡入淡出的任何元素。此外，“宽松”不是一个实际的选择......只是一个占位符，我不知道你想要什么，具体来说。但是对于传递回调例程，如果您进行正确/必要的更改，它应该可以工作。

【解决方案2】：

淡出所有元素，然后使用callback函数淡入特定元素：

$lis.fadeOut(1000, 'easeInCirc', function(){
   $(this).filter(selector).fadeIn(1000, 'easeInCirc');
});

http://plnkr.co/edit/0wkJGOgK3hxIfLX3RqKF?p=info

【讨论】：