Css () and opacity .. after fadeIn () doesn't work

Question

when i set opacity 0 to css (), the next fadeIn () doesn't work

if I set the opacity to 1, the loader element is displayed, but of course there will be no fade in.

 loader.css({ top : ($(window).height() - loader.height()) / 2+'px', left : ($(window).width() - loader.width()) / 2+'px', opacity : 0 }) .fadeIn(1000); 

If I use display: none does it work !?

 loader.css({ top : ($(window).height() - loader.height()) / 2+'px', left : ($(window).width() - loader.width()) / 2+'px', display : 'none' }) .fadeIn(1000); 

Answer 1

Try using fadeTo()

 loader.css({ top : ($(window).height() - loader.height()) / 2+'px', left : ($(window).width() - loader.width()) / 2+'px', opacity : 0 }) .fadeTo(1000, 1); 

Answer 2

The problem is that jQuery only performs functions like fadeIn if the item is not displayed. jQuery internally executes $(this).is(':hidden') to decide whether to run the animation. The hidden filter does not explicitly check if opacity is 0; it probably should be.

The obvious solution is to set display: none , as you have, or call hide() before calling fadeIn() , if you are sure that the element is hidden.

---

Another solution is to override the hidden filter to check for opacity:

 jQuery.expr.filters.hidden = function(elem) { var width = elem.offsetWidth, height = elem.offsetHeight; return (width === 0 && height === 0) || (!jQuery.support.reliableHiddenOffsets && (elem.style.display || jQuery.css(elem, "display")) === "none" || (elem.style.opacity || jQuery.css(elem, 'opacity')) === "0"); }; 

Running .is(':hidden') now checks for opacity. See jsFiddle .

---

I logged a bug report to cover this issue.

Answer 3

.fadein () is used to display a hidden element, I don’t know if it works with an opacity of 0. Instead, opacity: 0 try display: none

edit: it looks like you understood this before my post went through