jQuery中一个类的多个div的鼠标悬停（）事件答案

【问题标题】：Mouseover() event for multiple divs from a class in jQueryjQuery中一个类的多个div的鼠标悬停（）事件
【发布时间】：2014-10-09 16:51:55
【问题描述】：

我在一行中有三个 div，与 css prop "display: table-cell" 对齐：

<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 设置动画时遇到了这个问题。我正在尝试这个：

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

这段代码真正发生的是类中的每个 div 都执行动画。正如我之前所说：我要做的是在鼠标进入类中的元素时为单个 div 设置动画。

我已经尝试过的：

使用“startswith”标识符而不是使用“.divMenu”。
使用委托代替 mouseover 和 mouseleave 事件。

注意：“oFin”、“hFin”等只是常量。

【问题讨论】：

为我们创建一个小提琴...jsfiddle.net
既然已经有了元素，为什么还要查找 id 并重新选择元素？
如有其他问题，如果它与网络相关，请创建jsfiddle。并保持一些代码质量，您当前的 .animate 行是 223 个字符长，这已经很多了。一个简单的规则：如果它不适合代码块（意味着出现水平滚动条），它可能太长了。有罕见例外。
epascarello：我试图在不设置“目标”变量的情况下做到这一点，只使用“这个”。这是代码的一部分：jsfiddle.net/yn8j9ryp。如您所见：没有结果。

标签： javascript jquery html css

【解决方案1】：

工作demo

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

【讨论】：

不知道你是不是故意把代码加到mouseout，而是here's an updated JSFiddle with it。
@aelieo 我使用的动画不是布鲁诺需要的动画，所以我教他怎么做，他可以用他想要的动画自己做。
感谢您的回答，非常感谢您的帮助。这是我拥有的代码的小提琴：jsfiddle.net/yn8j9ryp。三个 div 正在向下滑动，但我只想要一个向下滑动。在此先感谢:)
@BrunoMamani 更新了小提琴：jsfiddle.net/yn8j9ryp/1 我删除了 display:table-cell，并将其更改为 float:left;
@Nick 太棒了！谢谢你，兄弟。我会调查什么是“float:left;”意思是，因为我不知道：P 再次感谢您。

【解决方案2】：

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

例如。

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

http://jsfiddle.net/yn8j9ryp/3/

【讨论】：