javascript - 如何通过一次悬停扩大和缩小两个不同的div

Question

我试图让两个宽度均为 500px 的 div 并排排列。然后，当您超过一个 div 时，悬停的 div 会扩展为 800px 的宽度，而另一个 div 会缩小到 200px 的大小。

目前，我已经设法使其中一个 div 扩展，但无法弄清楚如何同时使另一个缩小。

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

Answer 1

沿着这些思路。您可以使用比这个更智能的选择器。（例如获取兄弟 div 等）。

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

这里有一个样本

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

});​