在悬停事件中创建一次性操作

Creating a one time action within a hover event

本文关键字：一次性 操作 创建 悬停 事件      更新时间：2023-09-26

我有一个菜单，我想在页面加载时以全宽显示，然后在几秒钟后收缩。我已经成功地通过为我的timer变量分配一个setTimeout函数来做到这一点：

var timer = setTimeout(function() {
        $('nav').animate({width: '100p'}, 600, 'swing');
}, 1500);

我还想在悬停事件上对div 的宽度进行动画处理，如下所示：

$('nav').hover(function() {
    clearTimeout(timer);
    $(this).stop().animate({width: '100'}, 400, 'swing');
}, function() {
    $(this).stop().animate({width: '30"}, 400, 'swing');
});

我关心的是整体优化。显然，一旦计时器完成，它将永远不会重置，但基本上用户每次鼠标进入该div时都会调用该clearTimeout函数。我最初想到使用该方法，one()但不想在我现在设置的hover()事件之外创建一个全新的操作。有什么解决方法吗？

我会用css解决方案解决这个问题。请注意，过渡动画会出现旧版浏览器问题。

nav{
    width:30px;
}
nav.initial-expand, nav:hover{
    width:100px;
    -webkit-transition: width .4s; /* Safari */
    transition: width .4s;
}

删除.initial-expand 

var timer = setTimeout(function() {
    $('nav').removeClass('.initial-expand')
}, 1500);

由于.initial-expand或:hover触发展开的外观，因此删除类是否悬停无关紧要。

此外，我建议使用左/右位置而不是宽度在屏幕上/屏幕外制作动画，因为使其变窄会导致文本换行奇怪。

相关文章：