jQuery CSS 확장없이 메뉴 확장하기

그래서 어떤 항목을 가리키고 있는지에 따라 확장 및 축소 메뉴를 설정하려고합니다. 나는 css 전환을 사용하여 확장 및 축소를 부드럽게하고 일부 jQuery를 사용하여 CSS 속성을 변경합니다. 그러나 IE는 전환 CSS를 지원하지 않으므로 jQuery로이를 수행하는 방법을 찾고 있지만 해결책을 찾지 못했습니다. 내 지식은 jQuery에 관해서 가장 중요하지 않습니다. 어떤 도움이라도 훌륭 할 것입니다.jQuery CSS 확장없이 메뉴 확장하기

<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/

덕분에,

케빈

출처

2012-12-19 kevin11189

은 [이] (http://api.jquery.com/animate/) 당신은 무엇을 줄까? –

유사한 메뉴 효과가있는 사이트에 연결할 수 있으므로 달성하고자하는 것을 더 잘 볼 수 있습니까? –

는이 작업을 수행 할 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'}); 
    }); 
});

,243,210

<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-19 01:12:01 brianpeiris

그게 내가 원하는 것 같아. 그러나 메뉴간에 갈 때 정말 버그가 있습니다. 보세요, 그러면 알게 될 것입니다. 그래도 코드를 가져 주셔서 감사합니다. 진행 상황입니다. – kevin11189

http://jsfiddle.net/kevin11189/kRZHL/3/ – kevin11189

해당 문제를 해결하고 코드를 간소화하기 위해 답을 수정했습니다. – brianpeiris

jQuery CSS 확장없이 메뉴 확장하기

답변

관련 문제