Check visibility before proceeding

Question

Is it possible to do a callback for the below?

$('.element').css("visibility","visible");

I came across this but seems like there are issues using this in chrome.

$('.element').css("visibility","visible").promise().done(function(){
    alert( 'done! start stuff...' );
});

Basically I'm looking for a way to confirm that the $('.element') is visible before proceeding to the next line.

`jQuery.css` is a synchronous, Why do you need `promise` for that ? — Rayon, Sep 20 '16 at 06:06

score 1 · Answer 1 · answered Sep 20 '16 at 06:10

Setting an element to be visible is synchronous so there is no reason or purpose to using a promise with that. There is nothing to wait for that to take effect.

$('.element').css("visibility","visible");
console.log($('.element').css("visibility"));   // will show "visible" immediately

If, on the other hand, you want to wait for a repaint so the item is actually drawn on the screen, that is a different story. You will have to either force a repaint (which is a tricky non-standard thing to do in browsers these days as they try to avoid synchronous repaints) or you will have to use a slight delay with setTimeout() which allows a repaint to happen.

score 0 · Answer 2 · edited May 23 '17 at 11:48

For making an element visible, try display:block or display:inline-block (and a bunch of other display properties other than display:hidden).

Here is a difference between display and visibility properties.

Also, making an element visible doesn't guarantee that it is visible to user since it could be child of hidden parent element. You can use visible selector of jquery to confirm the same.

$('.element').css("display","block");

if ( $('.element').is( ":visible" )
{

}

Check visibility before proceeding

2 Answers2