I am looking to create a smooth transition from one image to another. The first image is the only child of a td element.
To begin, I apply styling to the td with .css('position', 'relative')
Next, I generate the second image and set some properties:
var img = $('<image src="a.png" />')
.css({
position: 'absolute',
top: 0,
left: 0,
opacity: 0,
'z-index': 1
})
.appendTo($td) ;
Once done, I animate both the old image and the new one:
img.fadeIn(1000);
oldimg.fadeOut(1000);
After the animation is complete, I can remove the old image and reset all css properties.
While this process works well in IE7, FireFox 5 seems to be positioning the replacement image at the top left corner of the parent div instead of perfectly overlaying the existing image in the td. Is this behavior expected? And could it be due to the fact that a td is not considered a valid relatively positioned ancestor?
If you have any suggestions on an improved approach for transitioning between images, feel free to share.
Update
I decided to switch back to having the image inline but added a negative top margin equal to its height (as the image completely fills the cell). This solution worked well without requiring absolute positioning.