Jquery 悬停以展开一个Div并收缩同一行中的另一个Div

我在一个网站上工作，那里每行有2个div，每个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>

部分JQUERY是这样的：

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

当然，我希望“行”（无论是左边还是右边）中的另一个“单元”随着另一个的增长而收缩，但我不知道如何确定“该行中的其他DIV”的标识符，或者如何同时设置两个对象的动画

谢谢你的帮助

在本例中，您可以使用

同级（）

来获取其他

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

---

这是手风琴的效果：

---

您还可以玩这个：

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

“slow

。

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