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 に答える