Question

Basically, when there are search results the body gets a class called .have-results.
When there are not results (body with no classes) I have a div that display instead of the search results:

body {
    .pointer {
        display: block;
    }
    #results-number {
        display: none;
    }
}

body.have-results {
    .pointer {
        display: none !important;
    }
    #results-number {
        display: block !important;
    }
}

I would like that div to appear in a fade in animation and disappear in a fade out animation. How can I accomplish this with this existing css?

Answer 1

I’ve found that you have a problem with the important style for this block.

Put this code after search results intialization:

if ($('body').hasClass('have-results')) {
  $('.pointer').fadeOut();
}
else {
  $('.pointer').css({display:'block !important', opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}, 1000);
}

Code: http://jsfiddle.net/AMM2N/1/