Question

您好我的网站上有以下代码，导致div从左侧滑出。这样可以正常工作，但是当鼠标离开该区域时，我希望div立即消失，而不是再次向后动画。我尝试了很多不同的方法，但似乎都没有。我确信有一种简单的方法可以做到这一点。谢谢:)）

$(document).ready(function(){
    $("#side-nav a").hover(function(){
        $text = $(this).html();
        $text = "#" + $text + "-box";
        $($text).animate({width:'toggle'},450);
    });
});

Answer 1

.hover()为mouseleave部分采用第二种方法（一个函数，它在mouseenter 和 mouseleave上运行，就像这样：

$(function(){
  $("#side-nav a").hover(function(){
    $("#" + $(this).html() + "-box").animate({width:'toggle'},450);
  }, function() {
    $("#" + $(this).html() + "-box").animate({width:'toggle'},0);
  });
});

You can give it a try here，这允许您仍然使用toggle，但0持续时间会触发即时css更改，而不是动画。我会考虑，而不是使用HTML，使用锚链接，如下所示：

<a href="#MyDiv">

然后你的代码更简单，就像这样：

$(function(){
  $("#side-nav a").hover(function(){
    $(this.hash).animate({width:'toggle'},450);
  }, function() {
    $(this.hash).animate({width:'toggle'},0);
  });
});

您直接使用href="#id"作为#ID selector，如果您还隐藏了通过JavaScript指向的其他元素，则意味着没有JS的用户会得到更好的支持，这将是优雅地降级而不隐藏内容。

jQuery在悬停时动画，在mouseout上立即消失？

1 个答案: