Javascript jQuery中一个类的多个div的Mouseover（）事件

我在一行中有三个div，与css prop display:table单元格对齐：

<div id="divMaster" width="1000" height="1000">
    <div id="divMenu1" class="divMenu"> Opción 1 </div>     
    <div id="divMenu2" class="divMenu"> Opción 2 </div>
    <div id="divMenu3" class="divMenu"> Opción 3 </div>
</div>

这段代码的实际情况是，类中的每个div都会制作动画。 正如我之前所说的：当鼠标进入类中的元素时，我要做的是设置单个div的动画

我已经尝试过的：

使用startswith identifier代替.divMenu。 使用委托而不是mouseover和mouseleave事件。 注：oFin、hFin等只是常数。

工作

---

另一个选择是将每个divMenu放在它自己的divMaster中。这样可以防止高度跨区域传播

例如

---

为我们制作一把小提琴。。。当您已经拥有元素时，为什么要查找id并重新选择该元素？有关进一步的问题，如果它与web相关，请创建一个。并保持一些代码质量，您当前的.animate行是223个字符长，这是非常重要的。一个简单的规则是：如果它不适合代码块，这意味着水平滚动条看起来可能太长了。很少有例外。埃帕斯卡雷洛：我试着不用设置目标变量，只用“this”就可以了。下面是一些代码：。正如您所见：没有结果。我不知道您是否故意将代码添加到mouseout中，但是。@aelieo我正在使用的动画不是Bruno需要的动画，因此我向他演示了如何做，他可以自己用他想要的动画来做。谢谢您的回答，我非常感谢您的帮助。下面是我掌握的一些代码：。三个潜水器在往下滑，但我只想要一个。提前感谢：@BrunoMamani更新了fiddle:I删除了display:table单元格，并将其更改为float:left@尼克：太棒了！谢谢你，伙计。我将调查什么是浮动：左；意思是，因为我不知道：再次谢谢你。

$(".divMenu").mouseover(function()
{
    target = "#" + $(this).attr("ID");
    $(target).stop(true, false);
    $(target).animate({opacity: '+=' + (parseFloat(oFin) - parseFloat($(target).css("opacity"))) + '',  height: '+=' + (parseFloat(hFin) - parseFloat($(target).css("height"))) + ''}, {duration: 1000, easing: "easeOutCirc"});
});

$(".divMenu").mouseleave(function()
{
    target = "#" + $(this).attr("ID");
    $(target).stop(true, false);
    $(target).animate({opacity: '-=' + (parseFloat($(target).css("opacity")) - parseFloat(oIni)) + '', height: '-=' + (parseFloat($(target).css("height")) - parseFloat(hIni)) + ''}, {duration: 1000, easing: "easeOutCirc"});     
});

    $(".divMenu").mouseover(function()
{
  $( this ).animate({
    fontSize: "50",
  }, 1000, function() {
    // Animation complete.
  });
});

<div id="divMaster1" width="1000" height="1000">
    <div id="divMenu1" class="divMenu">Opción 1</div>
</div>