Question

我正在进行jquery导航。除了IE之外，一切都很好。 jquery翻转状态的功能不起作用。有什么想法吗？我有包装导航编码，每个链接的翻转都有转换效果。我想我可能会错过某种元素作为IE中的一种解决方法，但我不确定。我试着查看其他可用的代码，似乎无法找到任何有关我在这个问题上缺少的帮助。谢谢！

CSS：

#menu {
    height: 45px;
    width: 1000px;
    margin: 0 auto;
    position: relative
}

.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu ul li {
    /* width and height of the menu items */
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    line-height: 45px;
}

.menu ul li a {
    /* must be postioned relative  */
    position: relative;
    display: block;
    width: 190px;
    height: 45px;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
}

.menu ul li a span {
    /* all layers will be absolute positioned */
    position: absolute;
    left: 0;
    width: 190px;
}

.menu ul li a span.out {
    top: 0px;
}

.menu ul li a span.over, .menu ul li a span.bg {
    /* hide */
    top: -45px;
}

#menu {
    background: #000;
}

#menu ul li a {
    color: #FFF;
}

#menu ul li a span.over {
    background: #FFF;
    color: #fb8f2c;
}

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <link rel="stylesheet" type="text/css" href="main.css" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    </head>

    <body>

        <div id="wrapper">
            <!--begin wrapper-->

            <div id="header">
                <!--begin header-->

                <div id="header-top">
                    <div id="left"><img src="images/LFMD_Logo_white.png" style="border: none" />
                    </div>

                    <div id="right">
                        <p>
                            (415) 655.7546
                        </p>
                    </div>

                </div><!--end header top-->

                <div id="menu" class="menu">
                    <!--begin menu-->
                    <ul>

                        <li>
                            <a href="#"><span class="out"> <span class="out">Link1</span> <span class="over"></span> </span><span class="bg"></span><span class="over"> </span></a>
                        </li>

                        <li>
                            <a href="#"><span class="out">Link2</span><span class="bg"></span><span class="over"></span></a>
                        </li>

                        <li>
                            <a href="#"><span class="out">Link3</span><span class="bg"></span><span class="over"></span></a>
                        </li>

                        <li>
                            <a href="#"><span class="out">Link4</span><span class="bg"></span><span class="over"></span></a>
                        </li>

                        <li>
                            <a href="#"><span class="out">Link5</span><span class="bg"></span><span class="over"></span></a>
                        </li>

                    </ul>
                </div><!--end menu-->

            </div><!--end header-->
        </div>
    </body>
</html>

JavaScript的：

$(document).ready(function() {
    /// wrap inner content of each anchor with first layer and append background layer
    $("#menu li a").wrapInner('<span class="out"></span>').append('<span class="bg"></span>');
    // loop each anchor and add copy of text content
    $("#menu li a").each(function() {
        $('<span class="over">' + $(this).text() + '</span>').appendTo(this);
    });
    $("#menu li a").hover(function() {
        // this function is fired when the mouse is moved over
        $(".out", this).stop().animate({
            'top' : '45px'
        }, 250);
        // move down - hide
        $(".over", this).stop().animate({
            'top' : '0px'
        }, 250);
        // move down - show
        $(".bg", this).stop().animate({
            'top' : '0px'
        }, 120);
        // move down - show
    }, function() {
        // this function is fired when the mouse is moved off
        $(".out", this).stop().animate({
            'top' : '0px'
        }, 250);
        // move up - show
        $(".over", this).stop().animate({
            'top' : '-45px'
        }, 250);
        // move up - hide
        $(".bg", this).stop().animate({
            'top' : '-45px'
        }, 120);
        // move up - hide
    });

    $("#menu2 li a").wrapInner('<span class="out"></span>');
    $("#menu2 li a").each(function() {
        $('<span class="over">' + $(this).text() + '</span>').appendTo(this);
    });
    $("#menu2 li a").hover(function() {
        $(".out", this).stop().animate({
            'top' : '45px'
        }, 200);
        // move down - hide
        $(".over", this).stop().animate({
            'top' : '0px'
        }, 200);
        // move down - show
    }, function() {
        $(".out", this).stop().animate({
            'top' : '0px'
        }, 200);
        // move up - show
        $(".over", this).stop().animate({
            'top' : '-45px'
        }, 200);
        // move up - hide
    });
});

jquery翻转导航打破ie

0 个答案: