Kamczatka Kamczatka - 1 month ago 6
CSS Question

FadeOut finish and then do something

I have some issues with my slider. I have colored div (in original project is image) and text on it. All i want is:


  1. fadeIn background-color

  2. fadeIn text

  3. fadeOut Text

  4. fadeOut background-color.



Itssounds simply but I cant get this effect. I cant do fadeOut text in time, its suddenly disappear. I tried add anonymous funcion in fadeOut() and it didnt works.

<section class="opinions">
<div class="opinionsContent">
<div class="slider">
<h2></h2>
</div>
</div>
</section>


Here's code :
https://jsfiddle.net/jes6vhdf/

Answer

This should work with fadeOut callback :

Javascript

    $('.opinions .slider').removeClass(sliderBGClasses[currentClass]);
    $('.opinions .slider h2').fadeOut('slow', function() {
        $(this).removeClass(descriptionsClasses[currentClass]);
        currentClass = currentClass + 1 < descriptionsClasses.length ? currentClass + 1 : 0;
        $('.opinions .slider h2').fadeIn('slow').addClass(descriptionsClasses[currentClass]);
        $('.opinions .slider').addClass(sliderBGClasses[currentClass]);
    });

JSFiddle

Comments