0

因此，我正在尝试根据您悬停的项目设置展开和折叠菜单。我正在使用 css 过渡来使展开和折叠平滑，并使用一些 jQuery 来更改宽度 css 属性。但是，IE 不支持过渡 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/

谢谢，

凯文

4

1 回答 1

2

您可以使用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; }
于 2012-12-19T01:12:01.500 回答