我有一个菜单,我想在页面加载时以全宽显示,然后在几秒钟后收缩。我已经成功地通过为我的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
触发展开的外观,因此删除类是否悬停无关紧要。
此外,我建议使用左/右位置而不是宽度在屏幕上/屏幕外制作动画,因为使其变窄会导致文本换行奇怪。