Doubts about Immaterial with jQuery

Question

Suppose I have a div with Hidden visibility, how to proceed to when I click on a button this div gets visibility : Visible and seconds later get Hidden again? I couldn’t even use visibility with Animate

 $("button").click(function(){
    $("div").animate({visibility:'visible'});

});

Answer 1

The visibility does not allow animation, or is visible or not. But you can do this with the opacity. In that case the best is to let the CSS do it and not the animate() jQuery.

You can do it like this:

CSS:

#escondida {
    opacity: 0;
    transition: opacity 1s;
}
.mostrar {
    opacity: 1 !important;
}

Javascript:

$("button").click(function () {
    var $el = $("#escondida");
    $el.addClass('mostrar');
    setTimeout(function () {
        $el.removeClass('mostrar');
    }, 1000);
});

example: http://jsfiddle.net/easdy832/

Code adds the class mostrar when the button is clicked, activating the transition 1 second via CSS. At the end of 1 second (1000 milliseconds) Javascript removes the class by starting new animation via CSS, now for opacity 0.