jquery - Jquery Animate メニュー ダウン

Question

私はcss jqueryメニューに取り組んでいます。このhttp://jsfiddle.net/A6rUG/のようなコードがあり、上ではなく下にアニメーション化しようとしています。コードは 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', 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 });
    });

})();

marginTop または marginBottom を変更してもうまくいかないようです。誰かが何を知っていますか？

Answer 1

これでうまくいくはずです：

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"

ただし、他のコードを変更して、ホバー リンクを後ではなくBEFORE実際<a>の DOM に配置する必要があります。