Question

我有一个div元素，我希望在悬停在另一个div上时增加宽度，然后在移动越过div时缩小宽度。我已经设法为click函数编写了这个代码，但似乎无法让它为hover函数工作。下面是我的“点击”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单词，但这不起作用。

Answer 1

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

Answer 2

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

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

试试这个

Answer 3

因此，您的代码似乎比它需要的要复杂一些。尝试这样的事情......

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

这里的代码说明当鼠标悬停（鼠标输入）#div1为#div2设置动画时。当您移开鼠标时，请将其设置为动画。

Answer 4

尝试使用以下内容：

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

我猜.hover（）无法正常工作，因为它会不断向element.data添加1

Answer 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);
  });

沿着这条线的东西应该这样做

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

5 个答案: