Javascript jQuery扩展菜单，无需css转换_Javascript_Css

Javascript jQuery扩展菜单，无需css转换

javascript css

Javascript jQuery扩展菜单，无需css转换,javascript,css,Javascript,Css,所以，我试图根据您悬停的项目设置一个展开和折叠菜单。我使用css转换使展开和折叠平滑，并使用一些jQuery更改宽度css属性。然而，IE不支持转换css，所以我试图用jQuery找到一种方法来实现这一点，但还没有找到解决方案。在jQuery方面，我的知识并不是最渊博的。任何帮助都将是惊人的 <html> <head> <style> .a{ width:100px; height:100px; background:#852369; position:rel

所以，我试图根据您悬停的项目设置一个展开和折叠菜单。我使用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>


.a{
宽度：100px；
高度：100px；
背景#852369；
位置：相对位置；
浮动：左；
-webkit过渡：宽度为1s；
-moz过渡：宽度为1s；
-o型过渡：宽度为1s；
-ms过渡：宽度1s；
过渡：宽度1s；
}
.b{
宽度：100px；
高度：100px；
背景#542365；
位置：相对位置；
浮动：左；
-webkit过渡：宽度为1s；
-moz过渡：宽度为1s；
-o型过渡：宽度为1s；
-ms过渡：宽度1s；
过渡：宽度1s；
}
c{
宽度：100px；
高度：100px；
背景#523641；
位置：相对位置；
浮动：左；
-webkit过渡：宽度为1s；
-moz过渡：宽度为1s；
-o型过渡：宽度为1s；
-ms过渡：宽度1s；
过渡：宽度1s；
}
这是a组
这是b组
我是c组
$（函数（）{
$（'.a'）.hover（函数（）{
$（'.b，.c'）.css（'width'，'50'）；
$（'.a'）.css（'width'，'200'）；
}，函数（）{
$（'.a、.b、.c'）.css（'宽度'，''）；
}
);
$（'.b'）。悬停（函数（）{
$（'.a，.c'）.css（'width'，'50'）；
$（'.b'）.css（'width'，'200'）；
}，函数（）{
$（'.a、.b、.c'）.css（'宽度'，''）；
}
);
$（'.c'）.hover（函数（）{
$（'.a，.b'）.css（'width'，'50'）；
$（'.c'）.css（'width'，'200'）；
}，函数（）{
$（'.a、.b、.c'）.css（'宽度'，''）；
}
);
});
您可以使用和方法来完成此操作：


这就是你想要的吗？你能链接到一个有类似菜单效果的网站，这样我们就可以更好地看到你想要达到的目标吗？这正是我想要的。然而，在菜单之间切换时，它确实有问题。看一看，你就会明白。不过，谢谢你的代码。这是一个进步。我已经修改了我的答案来解决这个问题并简化代码。太棒了。非常感谢你。
$(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; }