I'm encountering a strange issue. When I define the width and height of my images in pixels in my CSS file, all my jQuery animations and events work perfectly fine. However, when I switch to using percentages or 'auto' for the image dimensions (height: 100%; width: auto;), my entire website slows down significantly. The events don't trigger immediately, and the animations appear choppy with only 2 or 3 frames being visible. Can anyone suggest why this might be happening and how I can resolve it?
Here is an example of the animations applied to the left and right divs:
$("#left").animate({"width":"+=15%"},"linear");
$("#right").animate({"width":"+=15%"},"linear");
CSS:
img {
height: 100%;
width: auto;
}