너비에 애니메이션을 추가 한 후 fadeIn과 fadeOut이 멈 춥니 다

메뉴 항목에 마우스를 가져갈 때 div 요소로 구성된 메뉴가 있습니다.이 항목은 회전하고 다음 div.container 중첩 요소를 사라지게하지만 div의 너비에 애니메이션을 추가하면 .container the fadeIn과 fadeOut은 단지 누군가가 내 코드를 바꿀 수 있도록 그것들을 회전 시켜서 멈 춥니 다. 그래서 제대로 작동 할 것입니다. 알아낼 수 없습니다. http://jsfiddle.net/EcgTa/너비에 애니메이션을 추가 한 후 fadeIn과 fadeOut이 멈 춥니 다

여기이 그것을 수정해야 내 코드

function rotateZIndex(currentMenuItem) { 
    var $currentContent = $('#' + $(currentMenuItem).attr('class').split(' ')[1]), 
    $contentContainer = $currentContent.closest('.container'), 
    $contentItems = $('> div', $contentContainer); 

    $contentItems.not($currentContent) 
    .css('z-index', function (i, val) { return val - 1 }) 
    .fadeOut(); 
    $currentContent.css('z-index', $contentItems.length).fadeIn(); 
} 

$('.menu-item').mouseenter(function() {       
    $(this).closest('.container').next('.container').animate({ width: 200 }); 
}).mouseleave(function() { 
    $(this).closest('.container').next('.container').stop(false, true); 
}).mouseover(function() { 
    rotateZIndex(this); 
}); 


<div id="container1" class="container" 
    style="width:220px; position:relative; float:left"> 
    <div class="menu-item menu-1-1"> 
     <div class="menu-item-middle"> 
      <a href="#"><span class="header" 
       style="font-family:Verdana; font-size:.95em; font-weight:bold">Technology</span> 
      <span class="description" 
       style="font-family:Arial; font-size:.7em; color:#0b83bb">Computers &amp; Office 
      Supplies</span> </a> 
     </div> 
     <div class="menu-item-left"> 
      <div class="item-corner"> 
      </div> 
      <div class="item-icon"> 
       <img alt="" height="36" src="images/spacer.gif" width="36" /> 
      </div> 
     </div> 
     <div class="menu-item-right"> 
      <img alt="" height="44" src="images/spacer.gif" width="26" /> 
     </div> 
    </div> 
    <div class="menu-item menu-1-2"> 
     <div class="menu-item-middle"> 
      <a href="#"><span class="header" 
       style="font-family:Verdana; font-size:.95em; font-weight:bold">Interests</span> 
      <span class="description" 
       style="font-family:Arial; font-size:.7em; color:#0b83bb">Movies Books &amp; 
      Music</span> </a> 
     </div> 
     <div class="menu-item-left"> 
      <div class="item-corner"> 
      </div> 
      <div class="item-icon"> 
       <img alt="" height="36" src="images/spacer.gif" width="36" /> 
      </div> 
     </div> 
     <div class="menu-item-right"> 
      <img alt="" height="44" src="images/spacer.gif" width="26" /> 
     </div> 
    </div> 
    <div class="menu-item menu-1-3"> 
     <div class="menu-item-middle"> 
      <a href="#"><span class="header" 
       style="font-family:Verdana; font-size:.95em; font-weight:bold">Entertainment</span> 
      <span class="description" 
       style="font-family:Arial; font-size:.7em; color:#0b83bb">Sofware &amp; Games</span> 
      </a> 
     </div> 
     <div class="menu-item-left"> 
      <div class="item-corner"> 
      </div> 
      <div class="item-icon"> 
       <img alt="" height="36" src="images/spacer.gif" width="36" /> 
      </div> 
     </div> 
     <div class="menu-item-right"> 
      <img alt="" height="44" src="images/spacer.gif" width="26" /> 
     </div> 
    </div> 
    <div class="menu-item menu-1-4"> 
     <div class="menu-item-middle"> 
      <a href="#"><span class="header" 
       style="font-family:Verdana; font-size:.95em; font-weight:bold">Kids</span> 
      <span class="description" 
       style="font-family:Arial; font-size:.7em; color:#0b83bb">Toys &amp; Games</span> 
      </a> 
     </div> 
     <div class="menu-item-left"> 
      <div class="item-corner"> 
      </div> 
      <div class="item-icon"> 
       <img alt="" height="36" src="images/spacer.gif" width="36" /> 
      </div> 
     </div> 
     <div class="menu-item-right"> 
      <img alt="" height="44" src="images/spacer.gif" width="26" /> 
     </div> 
    </div> 
    <div class="menu-item menu-1-5"> 
     <div class="menu-item-middle"> 
      <a href="#"><span class="header" 
       style="font-family:Verdana; font-size:.95em; font-weight:bold">Clothing</span> 
      <span class="description" 
       style="font-family:Arial; font-size:.7em; color:#0b83bb">Shoes Jewelry &amp; 
      Apparel</span> </a> 
     </div> 
     <div class="menu-item-left"> 
      <div class="item-corner"> 
      </div> 
      <div class="item-icon"> 
       <img alt="" height="36" src="images/spacer.gif" width="36" /> 
      </div> 
     </div> 
     <div class="menu-item-right"> 
      <img alt="" height="44" src="images/spacer.gif" width="26" /> 
     </div> 
    </div> 
    <div class="menu-item menu-1-6"> 
     <div class="menu-item-middle"> 
      <a href="#"><span class="header" 
       style="font-family:Verdana; font-size:.95em; font-weight:bold">Pharmacy</span> 
      <span class="description" 
       style="font-family:Arial; font-size:.7em; color:#0b83bb">Health &amp; Beauty</span> 
      </a> 
     </div> 
     <div class="menu-item-left"> 
      <div class="item-corner"> 
      </div> 
      <div class="item-icon"> 
       <img alt="" height="36" src="images/spacer.gif" width="36" /> 
      </div> 
     </div> 
     <div class="menu-item-right"> 
      <img alt="" height="44" src="images/spacer.gif" width="26" /> 
     </div> 
    </div> 
    <div class="menu-item menu-1-7"> 
     <div class="menu-item-middle"> 
      <a href="#"><span class="header" 
       style="font-family:Verdana; font-size:.95em; font-weight:bold">Home</span> 
      <span class="description" 
       style="font-family:Arial; font-size:.7em; color:#0b83bb">Furniture Outdoors 
      &amp; Garden</span> </a> 
     </div> 
     <div class="menu-item-left"> 
      <div class="item-corner"> 
      </div> 
      <div class="item-icon"> 
       <img alt="" height="36" src="images/spacer.gif" width="36" /> 
      </div> 
     </div> 
     <div class="menu-item-right"> 
      <img alt="" height="44" src="images/spacer.gif" width="26" /> 
     </div> 
    </div> 
</div> 
<div id="container2" class="container" style="position:relative; float:left"> 
    <div id="menu-1-1" 
     style="height:300px; margin-left:2px; position:absolute; background-color:Aqua; z-index:0"> 
     Some Text</div> 
    <div id="menu-1-2" 
     style="height:280px; margin-left:2px; position:absolute; background-color:Blue; z-index:1"> 
     Some Text</div> 
    <div id="menu-1-3" 
     style="height:260px; margin-left:2px; position:absolute; background-color:Fuchsia; z-index:2"> 
     Some Text</div> 
    <div id="menu-1-4" 
     style="height:240px; margin-left:2px; position:absolute; background-color:Gray; z-index:3"> 
     Some Text</div> 
    <div id="menu-1-5" 
     style="height:220px; margin-left:2px; position:absolute; background-color:Green; z-index:4"> 
     Some Text</div> 
    <div id="menu-1-6" 
     style="height:200px; margin-left:2px; position:absolute; background-color:Lime; z-index:5"> 
     Some Text</div> 
    <div id="menu-1-7" 
     style="height:180px; margin-left:2px; position:absolute; background-color:Maroon; z-index:6"> 
     Some Text</div> 
</div> 

div.menu-item 
    { 
     padding-left:41px; padding-right: 25px; cursor:hand 
    }  
    div.menu-item-left 
    { 
     width:41px; height:44px; float:left; position:relative;right:41px; margin-left:-100% 
    } 
    div.menu-item-left .item-corner 
    { 
     width:3px; height:44px; float:left; 
    } 
    div.menu-item-left .item-corner.selected 
    { 
     background:url('images/Menu_Item_Corner.jpg') no-repeat; 
    } 
    div.menu-item-left .item-icon 
    { 
     float:right; 
    } 
    div.menu-item-left .item-icon.selected 
    { 
     background:url('images/Menu_Item_Middle.jpg') repeat-x; 
    } 
    div.menu-item-left .item-icon img 
    { 
     margin-top:3px; margin-bottom:3px; border:1px solid #969ba0 
    } 
    div.menu-item-middle 
    { 
     width:100%; height:44px; position:relative; float:left 
    } 
    div.menu-item-middle.selected 
    { 
     background:url(images/Menu_Item_Middle.jpg) repeat-x; 
    }  
    div.menu-item-middle a 
    { 
     display:block; text-decoration:none; color:#0b83bb 
    } 
    div.menu-item-middle span.header 
    { 
     display:block; margin-top:6px; margin-left:3px 
    } 
    div.menu-item-middle span.description 
    { 
     display:block; margin-left:3px 
    } 
    div.menu-item-right 
    { 
     width:26px; height:44px; float:left; position:relative; margin-right:-26px; background:url(images/Menu_Item_Arrow.jpg) no-repeat; 
    } 
    div.menu-item-right.selected 
    { 
     background:url('images/Menu_Item_Arrow_Over.jpg') no-repeat; 
    }

출처

2011-05-03 ONYX

이 코드의 관련 부분을 게시하시기 바랍니다 –

의 모든 관련 – ONYX

는 마우스 오버에 대한 애니메이션은 무엇 때문에 – lock

입니다 :

.container{ 
overflow: visible !important 
}

편집 : 좀 더 많은 연구가이 설명 켜져 :

을 분명히 당신은 폭을 애니메이션 할 때, jquery는 아이템의 오버 로우를 숨김으로 설정합니다. 이것은 그것이 보이는 상태를 유지합니다.

이 유사 : JQuery: Children Disappear on Parent Size Animation

출처

2011-05-03 03:31:18

그보다는 작동하지만 그 안에있는 요소를 숨기고 싶습니다. 너비가 상자 밖에 있습니다. 왼쪽부터 -200에서 0으로 왼쪽 속성에 애니메이션을 적용하려고합니다. – ONYX

.container 요소를 숨기려면 부모 요소를 추가하거나 감쌀 필요가 있다고 생각합니다. – ONYX

너비에 애니메이션을 추가 한 후 fadeIn과 fadeOut이 멈 춥니 다

답변

관련 문제