悬停在同一行中展开一个 Div 并缩小另一个 Div答案

【问题标题】：Hover to Expand One Div and Shrink Another In the Same Row悬停在同一行中展开一个 Div 并缩小另一个 Div
【发布时间】：2013-02-05 18:21:12
【问题描述】：

我在一个网站上工作，每行有 2 个 div，每个 45%。我想设置它，以便如果您连续悬停在一个 DIV 上，该行中的另一个 DIV 将随着悬停的 DIV 展开而缩小，然后在悬停离开时恢复。缩小的 DIV 可能在行中悬停的 DIV 之前或之后，这就是我被卡住的地方。

HTML 将如下所示，一遍又一遍地重复：

<div class="row">
    <div class="cell upcoming">
        <img src="stills/press/press-logo-gdc2013.jpg" class="general"><p class="one">Panelist - Game Developers Conference 2013</p>
        <p class="two">[Panel Name TBD]</p>
        <p class="three"><b>Panel Date/Location:</b> [TBD] on March 25-29, 2013 at GDC (San Francisco, California)</p>
        <p class="three"><b>Panelists:</b> [TBD]</p>
        <p class="three"><b>Panel Blurb:</b> [TBD]</p>
    </div>

    <div class="cell upcoming">
        <img src="stills/press/press-logo-wizard-world-st-louis.jpg" class="general"><p class="one">Panelist - Wizard World St. Louis 2013</p>
        <p class="two">[Panel Name TBD]</p>
        <p class="three"><b>Panel Date/Location:</b> [TBD] on March 22-24, 2013 at Wizard World (St. Louis, Missouri)</p>
        <p class="three"><b>Panelists:</b> [TBD]</p>
        <p class="three"><b>Panel Blurb:</b> [TBD]</p>
    </div>
</div>

“行”没有 CSS，但“单元格”的 CSS 是

div.cell { position:relative; margin:2px; float:left; width:45%; text-align:justify; vertical-align:top; border:2px solid; padding:10px; border-radius:25px; -moz-border-radius:25px; }

部分 JQUERY 是这样的：

 $('.cell')
    .on('mouseenter', function(){
        $(this).animate ({width:"75%"},"slow);
    })
    .on('mouseleave', function(){
        $(this).animate ({width:"45%"},"slow);
    });

当然，我希望“行”中的另一个“单元格”（无论是左边还是右边）随着另一个的增长而缩小，但我不知道如何确定“其他 DIV”的标识符在那一行中”或让 2 个东西同时制作动画。

感谢您的帮助！

【问题讨论】：

您需要使用手风琴效果，这在互联网上随处可见。做一些研究
仅供参考，动画名称末尾缺少两个引号："slow。

标签： jquery css html jquery-animate

【解决方案1】：

在这种情况下，您可以使用siblings() 来获取其他.cell 元素。

$('.cell')
    .on('mouseenter', function(){
        $(this).animate ({width:"75%"},"slow").siblings('.cell').animate({'width': '15%'}, "slow");
    })
    .on('mouseleave', function(){
        $(this).add($(this).siblings('.cell')).animate ({width:"45%"},"slow");
    });

【讨论】：