Jquery fadeIn() on a DIV with already set opacity style

Question

I have a DIV which is created dynamically in javascript code with the following style set:

-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;

I want to fadeIn the DIV using Jquery, but it doesn't work. The DIV still has opacity:0. I can't use fadeOut on the div because it is created dynamically and I need to fadeIn immediately after the image in the DIV has been loaded.

Is there any solution for this problem.

score 1 · Accepted Answer · answered Jan 02 '13 at 19:54

1

Just reset the CSS manually and then fade it in:

$("#myDiv").css({"-ms-filter": "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)", "-moz-opacity": 1, "-khtml-opacity": 1, "opacity": 1, "visibility": hidden}).fadeOut(0, function(){

     $(this).css({"visibility": "visible"}).fadeIn();
})

I use this a lot for things I need to start out hidden and then fade in.

answered Jan 02 '13 at 19:54

StephenRios

2,192
4
26
42

the problem is that the visibility: visible shows the content right away, and therefore I can't see the fadeIn taking place – Liron Harel Jan 02 '13 at 19:59
fadeOus is also not good because the div is not created yet by javascript and it's now in the form yet – Liron Harel Jan 02 '13 at 20:00
This ones works for me http://stackoverflow.com/questions/2435751/jquery-fade-element-does-not-show-elements-styled-visibility-hidden - is that what you've meant? – Liron Harel Jan 02 '13 at 20:08
Lol that's a shorthand version of exactly what I wrote, look at the end of the first line, there's a fadeout(0), then the visibility: visible and fade in are in the callback :) – StephenRios Jan 03 '13 at 15:17

score 0 · Answer 2 · answered Jan 02 '13 at 19:31

0

Use animate instead.

$('#your_div_id').animate({opacity: 1});

answered Jan 02 '13 at 19:31

Evan Davis

35,493
6
50
57

I can't, the div is not created yet, and when it does it should be already at opacity 0 by default – Liron Harel Jan 02 '13 at 19:32
use `animate` AFTER you've created the `div` to bring it into view, after the image loads. Unless I don't understand -- are you trying to show the div or hide it? – Evan Davis Jan 02 '13 at 19:34
When the DIV is first inserted into the document it should be not visible. The DIV contains an image. After the DIV is inserted and the image has been loaded, this trigger a function that needs to fadeIn the DIV and the image inside it. display:none doesn't work because it ruin some size calculations and I won't use it. visibility: hidden seems good, but when I run fadeIn it doesn't work, Jquery doesn't fadeIn a DIV with visibility hidden. – Liron Harel Jan 02 '13 at 20:04
Right, so start with `opacity: 0` and change the `opacity` once the image is loaded. – Evan Davis Jan 02 '13 at 20:13

score 0 · Answer 3 · answered Jan 02 '13 at 19:36

0

You could try loading the image with display: none instead of messing with the opacity, then fade it in.

answered Jan 02 '13 at 19:36

Tom Leslie

13
3

display none is not good because I make some calculations that cannot be done on a div in a display:none state – Liron Harel Jan 02 '13 at 19:50
I thought about using a javascript in onload of the div?! – Liron Harel Jan 02 '13 at 19:54

score 0 · Answer 4 · answered Jan 02 '13 at 19:37

You can use liveQuery (jquery plugin): https://github.com/brandonaaron/livequery

"Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated."

$('.someClass').livequery(function() { 
    /*a .someClass is created*/
    $(this).fadeIn();
});

liveQuery works nice!

Jquery fadeIn() on a DIV with already set opacity style

4 Answers4