CODEWITHSUNDEEP
jquery
Albion
Albion

Reputation: 609

Problem with width and height of an <img> in .animate()

I have a div. Inside the div is another group of divs that each contain an img. I am trying to setup a mouse over that makes the current img expand using .hover() and .animate(). I wanted the code to figure out whether it was a landscape or portrait image then expand it in width or height not to exceed the bounds of the containing div.

Here's the code inside of document ready. 

$('.clGalleryImage').hover(function() {
    $varHeight = $('.clGalleryImage:hover').height();
    $varWidth = $('.clGalleryImage:hover').width();
    if($varHeight > $varWidth) {
        $('.clGalleryImage:hover').animate({marginTop:0, height:125}, 'slow');
    } else {
        $('.clGalleryImage:hover').animate({marginLeft:0, width:125}, 'slow');
    }
}, function() { 
    ...
});

The handlerOut part of the .hover is incomplete so ignore that. The problem is with the handlerIn. When I hover over an img that is portrait the function works great. The image grows in width and height proportionally and stops growing at the border of the containing div. But when I hover over a landscape img (the else in the code above) it only grows in the width, not height proportionally. Is this by design?

I apologize if this is a newbie question but it has been bugging me all day. Eventually I coded it to work manually around the images I chose. I'd rather the code work with whatever the proportions of the image, then have to edit the image prior to using it.

Thanks

I suppose I should include the div and the CSS.

The div

<div class="clGalleryImageContainer">
    <img class="clGalleryImage" src="/New/Images/Molds/Molds001_th.jpg" alt="Mold Gallery Image 001" title="This is some description Text." />
</div>

The CSS

.clGalleryImage { display:block; height:100px; margin-left:auto; margin-right:auto; margin-top:12px;}
.clGalleryImageContainer { position:relative; float:left; width:150px; height:125px; border: 1px solid white; background-color:black; margin-top:12px; margin-left:21px; margin-bottom:12px;}

Upvotes: 0

Views: 509

Answers (1)

Nick Craver
Nick Craver

Reputation: 630379

You have the height set in the CSS height:100px; so .animate() will respect this style and leave it throughout the animation. In the other animation, you're explicitly telling it to change the height, so it will.

So the answer would be yes, this is by design.

Upvotes: 1

Related Questions