可以切换悬停时触发的 jQuery 动画吗？答案

【问题标题】：Can a jQuery animation triggered on hover be toggled?可以切换悬停时触发的 jQuery 动画吗？
【发布时间】：2013-11-17 14:58:19
【问题描述】：

我有一个 div 元素，我想在悬停在另一个 div 上时增加宽度，然后在移出上方 div 时缩小宽度。我已经设法为点击功能编写了这个代码，但似乎无法让它为悬停功能工作。下面是我的“点击”jQuery 代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


$(document).ready(function(){
$("#div1").click(function(e){
    var element = $(this),
        clicked = parseInt(element.data('clicked')) || 0;

    element.data('clicked', clicked + 1);
    $("#div2").stop();
    if (clicked % 2 == 0)
    {
        $("#div2").animate({left:"+=97%"}, 500);
    }
    else
    {
        $("#div2").animate({left:"-=97%"}, 500);
    }
    e.preventDefault();

谁能告诉我如何使用悬停而不是点击来完成这项工作？我试过用 hover/hovered 替换上面代码中的 clicked/click 字样，但这不起作用。

【问题讨论】：

使用 jQuery .hover() 有什么问题？ codepen.io/tigran_io/pen/nsJBD
使用 .hover() 它只能以一种方式工作 - 即您将鼠标悬停在 div 上并展开第二个 Div，但是当您移出 div 时，效果不会逆转。跨度>
你从来没有读过文档，是吗？

标签： javascript jquery html css hover

【解决方案1】：

$(document).on('mouseover', "#div1", function(e){
   //your code here
});

【讨论】：

你也可以使用 mouseenter 和 mouseleave 事件
感谢 Alexey，使用 mouseover/mouseout 效果很好。感谢您的帮助

【解决方案2】：

$('#div1').on('mouseover', function(e){
  $("#div2").animate({left:"97%"}, 500);
});

$('#div1').on('mouseout',  function(e){
  $("#div2").animate({left:"-97%"}, 500);
});

试试这个

【讨论】：

【解决方案3】：

因此，您的代码似乎比实际需要的要复杂一些。试试这样的...

$(document).ready(function(){
   $("#div1").mouseenter(function(e){
     $("#div2").animate({left:"+=97%"}, 500);
   });
   $("#div1").mouseleave(function(e){
     $("#div2").animate({left:"-=97%"}, 500);
   });
});

这里的代码是当悬停（鼠标输入）在#div1 上时，你的#div2 动画。当您将鼠标移开时，将其动画化。

【讨论】：

【解决方案4】：

尝试使用以下方法：

$('#div1').mouseenter(function(){
    // your function
});

我猜 .hover() 不工作，因为它不断地给你的 element.data 加 1

【讨论】：

【解决方案5】：

$.hover()可以接受2个函数作为参数，鼠标进入和鼠标离开，你可以这样删除clicked的数据。

http://api.jquery.com/hover/

$("#div1").hover(
  function (e) { // mouse enters
    $("#div2").stop();
    $("#div2").animate({left:"+=97%"}, 500);
  }, function (e) { // mouse leaves
    $("#div2").stop();
    $("#div2").animate({left:"-=97%"}, 500);
  });

沿着这条线应该做的事情

【讨论】：