如何用一个悬停扩展和​​缩小两个不同的div

Question

我正在尝试两个div并排，宽度为500px。然后当你超过一个div时，悬停的div扩展到800px的宽度，另一个div缩小到200px的大小。

目前我已设法让其中一个div扩展，但无法解决如何让其他div同时缩小。

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

Answer 1

这些方面的东西。您可以使用比此更聪明的选择器。 （比如获得兄弟姐妹等）。

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

Answer 2

这样的事情？

$('.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 () { });
})​

此处为sample

Answer 3

看到这个例子..有帮助吗？

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

});​