는 DIV 메뉴까지 슬라이드의 일부 속성을 변경 나는 메뉴까지이 슬라이드에서 일하고 있어요

Question

, http://www.kerrydean.ca/MATHESON/home2.html

이 세 번째 제목 메뉴에서 ... 꽤 잘 작동하지만,있어 훨씬 더보다 최대로 움직 이기만 다른 사람. 그들은 여기에 CSS와 JQuery와

.container{ 
    width:799px; 
    height:300px; 
    margin:0 auto; 
    position:relative; 
    overflow:hidden; 
    z-index: 100; 
} 
ul#menu{ 
    list-style:none; 
    position:absolute; 
    bottom:-25px; 
    left:20px; 
    font-size:13px; 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: normal; 
    color:#999; 
    letter-spacing:-1px; 

} 
ul#menu li{ 
    float:left; 
    margin:0px 10px 0px 0px; 
} 
ul#menu a{ 
    cursor:pointer; 
    position:relative; 
    float:left; 
    bottom:-95px; 
    line-height:20px; 
    width:150px; 
} 
ul#menu span.title{ 
    display:block; 
    height:26px; 
    color:#B7B7B6; 
} 
ul#menu span.description{ 
    width:138px; 
    height:120px; 
    background-color:#B7B7B6; 
    border:1px solid #fff; 
    color:#fff; 
    display:block; 
    font-size:12px; 
    padding:10px; 
    font-family: Arial, Helvetica, sans-serif; 
    letter-spacing: .5px; 
} 

$(function() { 
    $('#menu > li').hover(
     function() { 
      var $this = $(this); 
      $('a',$this).stop(true,true).animate({ 
        'bottom':'-15px' 
       }, 300); 
      }, 
     function() { 
      var $this = $(this); 
      $('a',$this).stop(true,true).animate({ 
        'bottom':'-100px' 
       }, 300); 
     } 
    ); 
}); 

사전에

감사 인 UL

<div class="container"> 
    <ul id="menu"> 
     <li> 
      <a> 

       <span class="title">&bull; control valves</span> 
       <span class="description"> 
        vee ball<br /> 
        butterfly control<br /> 
        rotary eccentric plug<br /> 
        globe<br /> 
        severe service and special 
       </span> 
      </a> 
     </li> 
     <li> 
      <a> 

       <span class="title">&bull; saftey relief &amp; rupture discs</span> 
       <span class="description"> 
        compact<br /> 
        high performance<br /> 
        API<br /> 
        clean service<br /> 
        fully lined<br /> 
        rupture discs<br /> 
       </span> 
      </a> 
     </li> 
     <li> 
      <a> 

       <span class="title">&bull; automated shut off valves</span> 
       <span class="description"> 
        soft seated ball valves<br /> 
        high performance butterfly valves<br /> 
        resilient seated butterfly valves<br /> 
        metal seated ball valves<br /> 
        triple offset vales<br /> 
        multi-port ball valves<br /> 
        knife gate valves<br /> 
        gate and globe valves<br /> 
        pneumatic actuators<br /> 
        electric actuators<br /> 
        hydraulic actuators<br /> 
        accessories 
       </span> 
      </a> 
     </li> 
     <li> 
      <a> 

       <span class="title">&bull; manual valves</span> 
       <span class="description"> 
        Search our website 
       </span> 
      </a> 
     </li> 
    </ul> 
</div> 

내에서 모두!

Answer 1

CSS에 명시적인 높이 (.description)를 지정하지 말거나 min-height을 사용하십시오. 대신, 원하는 높이로 정상적으로 감싸도록하십시오. 그런 다음 명시적인 픽셀 애니메이션 오프셋을 참조하는 대신 LI의 높이를 가져 와서 사용하십시오. (테스트되지 않은)이 같은

뭔가 :

$(function() { 
    $('#menu > li').hover(
     function() { 
      var $this = $(this); 
      $('a',$this).stop(true,true).animate({ 
        'bottom':'-15px' 
       }, 300); 
      }, 
     function() { 
      var $this = $(this); 
      $('a',$this).stop(true,true).animate({ 
        'bottom': $(this).height() + 'px' 
       }, 300); 
     } 
    ); 
});