鼠标悬停时要(缓慢)增加导航宽度
Navigation width to be increased (slowly) on mouseover
我是javascript的新手。我被要求做一些类似导航节目的事情 http://www.samsung.com/global/galaxys3/feature.html#smartstay
我有一个名为.container的类,其中包含许多子类。我需要在鼠标悬停时增加 .menu 的宽度。目前,在鼠标悬停事件期间,有 2 个元素受到影响。是否可以更改代码,以便仅影响当前的鼠标悬停元素?
我听说补间能够胜任这项工作。当前使用补间.js现在。
下面是我的代码:
$('.menu').mouseover(function(){
var i=0;
//case sensitive
$('.menu').width('50px');
tweenTA2 = new Tween(new Object(),'xyz',Tween.regularEaseOut,0,100,1);
var myelem = $(this);
tweenTA2.onMotionChanged = function(event){
$(this).text('here');
setTimeout(function(){
i= i+1;
if (i < 100)
{
myelem.width(i);
myelem.css("background-color", "yellow");
}
},100);
};
tweenTA2.onMotionStarted = function(event){
$('.menu').width('50px');
};
//tweenTA2.onMotionResumed = function(event){
// $('.menu').width('50px');
//};
tweenTA2.start();
});
我也不确定补间(例如开始、结束、持续时间)
你能协助在我发布的网站上重现效果吗?
如果你不需要支持较旧的浏览器,那么我建议完全忘记JavaScript,并使用CSS3过渡来完成这项工作,而无需任何外部库。
类似的东西
#menu {
width:100px;
transition:width 1s ease-in-out;
}
#menu:hover {
width:300px;
transition:width 1s ease-in-out;
}
添加供应商前缀后,这将适用于大多数现代浏览器,对于较旧的浏览器,这将优雅地降级为在悬停时立即显示全宽。
相关文章:
- JQuery使计数器每次更改时都会增加
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- angular 1.5应用程序中的导航栏
- 无法从jquery Mobile导航栏重定向到另一个页面
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 如何增加同时按键总数
- 导航到特定事件的另一个变量页面
- MVC 3页面导航和使用javascript传递参数
- 如何使用css动画从中心增加边界线
- 如何在react js中从一个页面导航到另一个页面
- 导航栏没有调整到浏览器屏幕的大小
- 显示放大镜弹出窗口时隐藏导航内容
- DataTable按下键选择扩展/导航
- 正在检测导航到<a name=“;最新主题”></a>
- jQuery增加了菜单导航的延迟,可用性
- 鼠标悬停时要(缓慢)增加导航宽度
- 如何防止滚动时此导航栏的高度增加
- 如何在视频导航上增加视频索引
- 增加选项卡式导航中文本的字体大小
- 增加特定导航栏的高度