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

【问题标题】：How to expand and shrink two different div's with one hover如何通过一次悬停扩大和缩小两个不同的 div
【发布时间】：2012-10-02 08:35:06
【问题描述】：

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

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

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

【问题讨论】：

@IsaacFife：闻起来像是对我的回答......

标签： javascript jquery html

【解决方案1】：

类似的东西。您可以使用比这个更智能的选择器。（例如获取兄弟 div 等）。

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

【讨论】：

【解决方案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

【讨论】：

【解决方案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);
    });

});

【讨论】：