Question

I’m trying to have two divs that’s are both width of 500px side by side. Then when you over one the the divs the hovered div expands to a width of 800px and the other div shrinks to a size of 200px.

Currently I have managed to make one of the divs expand but cannot work out how to make the other shrink at the same time.

$(function () { 
    $('.companybox1').hover(
        function () { 
            $(this).animate({ width: '+=300' }, 750, function () { }); 
        }, 
        function () { 
            $('.companybox1').animate({ width: '-=300' }, 750, function () { }); 
        }); 
});

Answer 1

Something along these lines. You can use smarter selectors than this one. (like for example getting the sibling-divs, etc).

$('.companybox1').hover(
    function () { 
        $(this).animate({ width: '+=300' }, 750, function () { }); 
        $('.companybox2').animate({ width: '-=300' }, 750, function () { });
    }
 )