Jquery 애니메이션 메뉴 아래로

Question

나는 css jquery 메뉴로 작업 중이다. 이 코드는 http://jsfiddle.net/A6rUG/이며 대신 아래로 애니메이션을 적용하려고합니다. 코드는 트릭을 할 것 같지 않습니다 marginTop 또는 marginBottom 변경 var에 slideNav = (함수() {

var spanHeight, 
     nav = $('#nav'), 
     lis = $('li', nav), 
     anchors = $('a', lis).css('padding', 0); 

    $.each(anchors, function() { 
     var a = $(this), 
      val = a.text(); 

     a.html('<span>' + val + '</span> <span>' + val + '</span>') 
     .parent('li') 
      .height(a.children('span:first').outerHeight()) 
     .end() 
     .children('span:first') 
      .css('marginTop', 0) // strange for IE 
    }); 

    spanHeight = lis.eq(0).height(); 

    lis.hover(function() { 
     $(this).find('span:first').animate({ 
      marginTop : -56 
     }, { duration: 200, queue : false }); 
      }, function() { 
     $(this).find('span:first').animate({ 
      marginTop : 0 
     }, { duration: 200, queue: false }); 
    }); 

})(); 

입니다. 누군가가?

Answer 1

:.

,536을

var slideNav = (function() { 

    var spanHeight, 
     nav = $('#nav'), 
     lis = $('li', nav), 
     anchors = $('a', lis).css('padding', 0); 

    $.each(anchors, function() { 
     var a = $(this), 
      val = a.text(); 

     a.html('<span>' + val + '</span> <span>' + val + '</span>') 
     .parent('li') 
      .height(a.children('span:first').outerHeight()) 
     .end() 
     .children('span:first') 
      .css('marginTop', -56) // strange for IE 
    }); 

    spanHeight = lis.eq(0).height(); 

    lis.hover(function() { 
     $(this).find('span:first').animate({ 
      marginTop : 0 
     }, { duration: 200, queue : false }); 
      }, function() { 
     $(this).find('span:first').animate({ 
      marginTop : -56 
     }, { duration: 200, queue: false }); 
    }); 

})(); 

및 CSS : 그것은 도움이

body { 
    text-align: center; 
    background: #676767; 
    font-family: helvetica; 
    } 

    ul, li { 
    margin: 0; padding: 0; 
    overflow: hidden; 
    } 

    ul li { 
    float: left; 
    list-style: none; 
    margin-right: 1em; 
    position: relative; /* IE fix */ 
    } 

    li a { 
    color: white; 
    text-decoration: none; 
    float: left; 
    font-size: 30px; 
    background: black; 
    padding: 10px; 
    } 

    li a:hover { 
    background: #ff0; 
    color:white; 
    } 

    /* if JS */ 

    li a span { 
     display: block; 
     background: white; 
     color: maroon; 
     padding: 10px; 
     position: relative; 
     font-weight: bold; 
    } 

    li a span:last-child { 
     background: black; 
     color: white; 
    } 

Answer 2

marginTop : "56px" 

하지만 당신은해야 할 것입니다 무엇을 알고 있나요 하지 후, DOM에 호버 링크 BEFORE 실제 <a>을 넣어 다른 코드를 변경이 트릭을 할해야