在继续之前检查可见性

Question

是否可以为以下内容进行回调？

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

我偶然发现了这一点，但似乎在Chrome中使用此功能存在问题。

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

基本上我正在寻找一种方法来确认$('.element')在进入下一行之前是否可见。

Answer 1

将元素设置为可见是同步的，因此没有理由或目的使用promise。没有什么可以等待它生效。

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

另一方面，如果您想等待重新绘制以便在屏幕上实际绘制该项目，那么这是另一回事。您将不得不强制重绘（这些天在浏览器中这是一个非常棘手的非标准事情，因为它们试图避免同步重绘）或者您将不得不使用setTimeout()稍微延迟，这允许重新绘制发生。

Answer 2

要使元素可见，请尝试display:block或display:inline-block（以及除display:hidden以外的一堆其他显示属性）。

这是difference between display and visibility properties。

此外，制作元素visible并不能保证它对用户可见，因为它可能是hidden parent element的孩子。您可以使用visible selector的jquery来确认相同的内容。

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

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

}