jQuery를 원활하게 소비/축소 아코디언/회전 목마

Question

전에, 나는 여기에 회전 목마/아코디언을하는 방법에 대한 대답을 얻었다 :

http://www.jsfiddle.net/Mottie/UdUus/117/

원활 열기/닫기 모든 일이없는 움직이는. 열쇠는 거의 사용되지 않는 단계 속성이었습니다.

그러나이 스크립트를 조정하여 모든 항목의 너비가 같고 마우스 오버시 necrosary로 확장/축소 된 다음 mouseleave에서 원래 상태로 축소되도록이 스크립트를 조정할 수있는 방법을 찾으려고합니다.

나는 노력했지만 아무 소용이 없습니다. 누구든지 어떤 아이디어?

A.

Answer 1

HTML

<div id="promo"> 
     <ul> 
      <li class="promo1">d</li> 
      <li class="promo2">d</li> 
      <li class="promo3">d</li> 
      <li class="promo4">d</li> 
      <li class="promo5">d</li> 
     </ul> 
    </div> 

CSS :

#promo { width:404x; height:200px; overflow:hidden; } 
#promo ul { width:105%; } 
#promo li { float:left; height:200px; margin-right:1px; width:50px; } 
#promo .promo1 { background:red;} 
#promo .promo2 { background:green; } 
#promo .promo3 { background:red; } 
#promo .promo4 { background:green; } 
#promo .promo5 { background:red; margin-right:0px; } 

JS :

var panels = $('#promo li'); 

panels.hoverIntent(

function() { 
    if (!$(this).is('.expanded')) { 
     $(this).animate({ 
      width: 200 
     }, { 
      step: function(width, ani) { 
       var w = Math.floor(width); 
       $('.expanded').css('width', (250 - w) + 'px'); 
       $(ani.elem).css('width', (200 - w) + 'px'); 
      }, 
      duration: 500, 
      complete: function() { 
       panels.removeClass('expanded'); 
       $(this).addClass('expanded'); 
      } 
     }); 
    } 
}, function() {}); 

$("#promo").hover(function() {}, function() { 

    $("li.expanded", this).animate({ 
     width: 50, 
     duration: 500 
    }).removeClass("expanded"); 

}); 

Answer 2

업데이트하여 jsfiddle