Add fadeOut in front of fadeIn

Question

Im using this script to filter elemets based on class. Currently it stops previous function and fade in new class.

Basically i need to fadeOut everything before it starts to fadein selector. Currently it is a sharp cut from 100% opacity to starting fadeing in selector, and i want to smoothly fade out current (or specific class) and after that fade in this one.

my Code:

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

Answer 1

Pass the fadeIn() as a callback to the fadeOut():

} else {
    $("elements-to-fade-out").fadeOut(1000, "easeInCirc", function() {
        $lis.stop().fadeIn(1000, 'easeInCirc');
    });
}

You could also do:

} else {
    $("elements-to-fade-out").fadeOut(1000, "easeInCirc");

    // Fade in after 1000
    //
    setTimeout(function() {
        $lis.stop().fadeIn(1000, "easeInCirc");
    }, 1000);
}

See here for info on the callback:

http://www.w3schools.com/jquery/eff_fadein.asp

Answer 2

Fade out all elements and then use thecallback function to fade the specific element in:

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

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