Suppose I have a div with visibility hidden, how can I do that when I click on a button this div becomes visibility: visible and seconds later it gets hidden again? I could not even use visibility with animate
$("button").click(function(){
$("div").animate({visibility:'visible'});
});
visibility does not allow animation, is visible or not. But you can do this with opacity . In this case it is best to let CSS do this and not animate() of jQuery.
You can do 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);
});
The code adds the class mostrar when the button is clicked, activating the transition of 1 second via CSS. At the end of 1 second (1000 milliseconds) JavaScript removes the class by initiating new animation via CSS, now for opacity 0 .