无css过渡的jQuery扩展菜单缓动
无css过渡的jQuery扩展菜单缓动
提问于 2012-12-19 08:54:18
因此，我正在尝试根据您悬停的项目来设置展开和折叠菜单。我使用css转换来使展开和折叠变得平滑，并使用一些jQuery来更改宽度css属性。然而，IE不支持transition css，所以我正在尝试用jQuery来做这件事，但是还没有找到解决方案。当涉及到jQuery时，我的知识并不是最好的。任何帮助都是令人惊叹的。
<html>
<head>
<style>
.a{
width:100px;
height:100px;
background:#852369;
position:relative;
float:left;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
.b{
width:100px;
height:100px;
background:#542365;
position:relative;
float:left;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
.c{
width:100px;
height:100px;
background:#523641;
position:relative;
float:left;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
</style>
</head>
<body>
<div class="a">This is div a</div>
<div class="b">This is div b</div>
<div class="c">This is div c</div>
<script>
$(function() {
$('.a').hover(function() {
$('.b,.c').css('width', '50');
$('.a').css('width', '200');
}, function() {
$('.a,.b,.c').css('width', '');
}
);
$('.b').hover(function() {
$('.a,.c').css('width', '50');
$('.b').css('width', '200');
}, function() {
$('.a,.b,.c').css('width', '');
}
);
$('.c').hover(function() {
$('.a,.b').css('width', '50');
$('.c').css('width', '200');
}, function() {
$('.a,.b,.c').css('width', '');
}
);
});
</script
</body>
</html>这是我目前所拥有的一个简单的jsfiddle。
http://jsfiddle.net/kevin11189/kRZHL/1/
谢谢,
凯文
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-12-19 09:12:02
您可以使用animate和stop方法来完成此操作：
http://jsfiddle.net/brianpeiris/CgY2b/2/
$(function() {
var menus = $('.menu');
menus.hover(function() {
menus.stop();
$(this).animate({'width': '200'});
menus.not(this).animate({'width': '50'});
}, function () {
menus.stop().animate({'width': '100'});
});
});<div class="menu a">This is div a</div>
<div class="menu b">This is div b</div>
<div class="menu c">This is div c</div>.menu{
width:100px;
height:100px;
position:relative;
float:left;
}
.a{ background:#852369; }
.b{ background:#542365; }
.c{ background:#523641; }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13943975
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号