Question

I have two images side-by-side. When the user hovers over an image, it should expand.

HTML:

<a href="#"><div id="skinny"></div></a>
<a href="#"><div id="room9"></div></a>

jQuery:

$('#skinny').hover(function() {
    $(this).animate({width: '220px'}, 'fast');
    $('#room9').animate({width: '80px'}, 'fast');
}, function() {
    $(this).animate({width:'150px'},'fast');
    $('#room9').animate({width: '150px'}, 'fast');
});

jsFiddle: http://jsfiddle.net/G4q4q/

It “works” with the left image, but I couldn’t get it to work with the right. My current method is inefficient, so if you have any suggestions to optimize it, please let me know.

Answer 1

Ok, well I’ve made a very crude example that doesn’t allow for expansion/multiple images, but you should get the idea. To clip elements in CSS, just just overflow: hidden

jsFiddle: http://jsfiddle.net/G4q4q/10/

HTML

<div id="wrap">
    <a href="#" id="skinny">
        <img class="image" src="http://www.theexoticvet.com/images/content_1.jpg" />
    </a>
    <a href="#" id="room9">
        <img class="image" src="http://www.theexoticvet.com/images/content_2.jpg" />
    </a>
</div>​

CSS

#wrap {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
}

a {
    display: block;
    float: left;
    top: 0;
    width: 50%;
    height: 300px;
    overflow: hidden;
}

​Javascript

$(function() {
    $('a').hover(function() {
        $(this).stop().animate({width: '80%'}, 'fast')
        $('a').not(this).stop().animate({width: '20%'}, 'fast');
    }, function() {
        $('a').stop().animate({width:'50%'},'fast');
    });
});

​
Edit notes: I edited this to make it a little better than my first attempt.