Check out this fiddle:
[edit: updated fiddle => http://jsfiddle.net/NYZf8/5/ ]
http://jsfiddle.net/NYZf8/1/ (try viewing in different screen sizes to ensure the image fits inside the %-width div)
The animation should begin from where the image is correctly positioned after the animation completes. I am puzzled as to why the initial call to setMargin() results in a negative margin even though the logged heights of the container div and img are the same, and only after the jqueryui show() call does the image appear where I want it to be from the start. My suspicion is that somehow the height of the image is 0 or undefined despite logging fine :?
Javascript code:
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();