JQueryui animation with inital undefined height

Question

See the following script:

[edit: updated fiddle => http://jsfiddle.net/NYZf8/5/ ]

http://jsfiddle.net/NYZf8/1/ (view in different screen sizes, so ideally the image fits inside a div layout with a width of% -width)

After the animation, the image should start the animation from the position where it is displayed correctly. I don’t understand why the first call to setMargin() sets a negative margin even though the height of the log for the div and img container is the same as after the jqueryui show() call set the image in which I would like it (with the very beginning). I assume that somehow the image height is 0 / undefined, although it writes fine:?

JS:

 console.log('img: ' + $('img').height()); console.log('div: ' + $('div').height()); $('img').show('blind', 1500, setMargin); function setMargin() { var marginTop = ( $('img').closest('div').height() - $('img').height() ) / 2; console.log('marginTop: ' + marginTop); $('img').css('marginTop', marginTop + 'px'); } setMargin(); 

Answer 1

An interesting problem ... after some time with your code (last update), I saw that the blind animation didn’t actually work in my browser (I am testing Chrome, and maybe it was shelling but I didn’t see it since the image was never hidden first), so I tried moving it inside the function bound to load :

 $('img').bind('load', function() { ... $(this).show('blind', 500); }); 

Now that it was animated, it seemed like a “snap” or “jump” after the animation ended, and also seemed to appear with the wrong field. This eliminates the inability of jQuery to correctly calculate the dimensions of what has not yet been displayed on the screen. In addition, blind seems to need more explicit measurements for proper operation. This is the problem: how to calculate the sizes of elements until they appear on the screen?

One way to do this is to fade out in an element whose dimensions you are trying to calculate very little - not enough to see yet - do some calculations, then hide it and prepare it to animate the appearance. You can achieve this with jQuery using the fadeTo function:

 $('img').bind('load', function() { $(this).fadeTo(0, 0.01, function() { // do calculations... } } 

You will need to work out the measurements, apply them using the css() function, dazzle the image, and then reset the image styles to return to their original states, thanks to the blind animation, which needs these measurements explicitly. I would also recommend using classes in css to help you improve things a bit. Here is a detailed working example: jsfiddle desktop

Not the most elegant way to do something, but this is the beginning. There are much simpler ways to achieve seemingly better results, and I think I just want to know why you are looking to make the blinds and explicit alignment this way? This is a much more difficult achievement with the code you used ... anyway, hope this helps! :)