CODEWITHSUNDEEP
javascriptjqueryhtml
user1738676
user1738676

Reputation:

How to expand and shrink two different div's with one hover

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 () { }); 
        }); 
});

Upvotes: 2

Views: 1146

Answers (3)

udidu
udidu

Reputation: 8588

See this example.. is it helps?

http://jsfiddle.net/ZN8bq/

$(function(){

    $('.overable').hover(function(){
        $(this).animate({ width: '+=300' }, 500);
        if($(this).hasClass('div1')){
            $('.div2').animate({ width: '-=300' }, 500);
        } else {
            $('.div1').animate({ width: '-=300' }, 500);
        }
    }, function(){
        $('.overable').animate({ width: '500px' }, 500);
    });

});​

Upvotes: 0

user757095
user757095

Reputation:

something like this?

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

here a sample

Upvotes: 1

Rob Audenaerde
Rob Audenaerde

Reputation: 20039

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 () { });
    }
 )

Upvotes: 1

Related Questions