CODEWITHSUNDEEP
jquery
Tanoro
Tanoro

Reputation: 869

Enlarging image in place with jquery animate only works in Firefox

I have a class of images I want to enlarge (but remain in place) when I mouseover them. the images are all the same size (50x15 small, enlarging to 100x30). I'd prefer a smooth, animated effect, I am using the jquery animate function to increase the image size and adjust the image's position a little.

HTML:

<table>
<tr>
  <td align="center" valign="top"><div class="magContainer"><img src="images/unprocessed-lg.png" class="blockreqBtn" /></div></td>
</tr>
</table>

CSS:

.magContainer {
  margin: 0px;
  position: relative;
  width: 50px;
  text-align: left;
  border: 1px solid #000000;
}

img.blockreqBtn {
  position: fixed;
  cursor: pointer;
  z-index: 0;
  height: 15px;
  width: 50px;
}

jQuery:

$(".blockreqBtn").hover(function() {
    // hover in
    $(this).animate({
       height: "30",
       width: "100",
       left: "-=25",
       top: "-=8"
    }, "fast");
}, function() {
    // hover out
    $(this).animate({
        height: "15",
        width: "50",
        left: "+=25",
       top: "+=8"
    }, "fast");
});

The issue I am having is that this works perfectly in Firefox 10.0, but fails miserably in all other browsers I test. If I try this in IE8, Safari 5.1.4, or the latest Chrome, the images leap to the upper left corner of the browser window. The size adjustment is fine, but why are my images leaping out of position?

Upvotes: 0

Views: 596

Answers (1)

Blazemonger
Blazemonger

Reputation: 92893

position:fixed is supposed to work relative to the browser window, not relative to the containing element. Remove that part of your CSS and you should be fine.

Upvotes: 1

Related Questions