Jquery css 不适用于 document.ready答案

【问题标题】：Jquery css is not working on document.readyJquery css 不适用于 document.ready
【发布时间】：2014-12-03 09:55:45
【问题描述】：

我的 jquery 代码中有一行在 document.ready 函数之后不起作用。其他的确实有效。

同一行在 window.resize 函数中确实有效。我希望你能帮助我：我在不起作用的行后面添加了一条评论

    <!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">
    <head>
        <title>
            Made in 030
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="style.css" rel="stylesheet" media="all" type="text/css" />
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function(){
                        // hover
            $(function() {

                var $el, leftPos, newWidth,
                    $mainNav = $("menu ul");

                $mainNav.append("<li id='magic-line'></li>");
                var $magicLine = $("#magic-line");

                $magicLine
                    .width($("menu ul li.active").width())
                    .css("left", $("menu ul li.active a").position().left)
                    .data("origLeft", $magicLine.position().left)
                    .data("origWidth", $magicLine.width());

                $("menu ul li a").hover(function() {
                    $el = $(this);
                    leftPos = $el.position().left;
                    newWidth = $el.parent().width();
                    $magicLine.stop().animate({
                        left: leftPos,
                        width: newWidth
                    },500);
                }, function() {
                    $magicLine.stop().animate({
                        left: $magicLine.data("origLeft"),
                        width: $magicLine.data("origWidth")
                    },500);    
                });
            });

            $('.menu_container').css('height',$('body').width()/11);
            $('menu ul li a').css('font-size',$('body').width()/85);
            $('#magic-line').css('margin-top',$('body').width()/11 - 10);//This line is not working
            $('.logo img').css('height',$('body').width()/11-15);
            $('.logo').css('height',$('body').width()/11);

            var outerHeight = $('menu ul li').height();
            var innerHeight = $('menu ul li a').height();
            $('menu ul li a').css('margin-top', (outerHeight - innerHeight)/2);

            var outerWidth = $('menu').width();
            var innerWidth = $('.logo').width();
            $('.logo_container').css('margin-left', (outerWidth - innerWidth)/2);



        })
        $(window).resize(function(){
            $('.menu_container').css('height',$('body').width()/11);
            $('menu ul li a').css('font-size',$('body').width()/85);
            $('#magic-line').css('top',$('body').width()/11 - 10);
            $('.logo img').css('height',$('body').width()/11-15);
            $('.logo').css('height',$('body').width()/11);

            var outerHeight = $('menu ul li').height();
            var innerHeight = $('menu ul li a').height();
            $('menu ul li a').css('margin-top', (outerHeight - innerHeight)/2);

            var outerWidth = $('menu').width();
            var innerWidth = $('.logo').width();
            $('.logo_container').css('margin-left', (outerWidth - innerWidth)/2);
        })

        </script>
    </head>
    <body>
        <header>
            <div class="menu_container">
                <menu>
                    <ul class="left_menu" >
                        <li class="left" ><a href="#">Home</a></li>
                        <li class="left" ><a href="#">Over</a></li>
                        <li class="left"><a href="#">Probeerlijst</a></li>
                        <li class="logo_container">
                            <div class="logo">
                                <img src="img/logo.png" alt=""/>
                            </div>
                        </li>
                        <li class="right active"><a href="#">Contact</a></li>
                        <li class="right"><a href="#">Shop</a></li>
                        <li class="right"><a href="#">Blog</a></li>
                    </ul>
                </menu>
            </div>
        </header>
    </body>
</html>

【问题讨论】：

没测试过，但是哪一行不行？是你漏掉了还是我错过了？
@Benjamin 我确实加载了库，但我没有在这里展示。但现在我做到了。
@Todd 行后有注释。它是：$('#magic-line').css('margin-top',$('body').width()/11 - 10);
你应该真的考虑使用 CSS 媒体查询...
两个文档准备好嵌套，是否需要？你的顶部还有一个错误的 DTD。

标签： jquery css function document-ready

【解决方案1】：

您的问题是，$('#magic-line') 在您不工作的线路上是空的。

您需要在代码中添加一些window.setTimeout 以确保它在正确的时间运行。（附加后）

观看：

window.setTimeout(function(){
    $('.menu_container').css('height',$('body').width()/11);
    $('menu ul li a').css('font-size',$('body').width()/85);
    console.log($('#magic-line'));
    $('#magic-line').css('margin-top',$('body').width()/11 - 10); // this one is not working
    $('.logo img').css('height',$('body').width()/11-15);
    $('.logo').css('height',$('body').width()/11);

    var outerHeight = $('menu ul li').height();
    var innerHeight = $('menu ul li a').height();
    $('menu ul li a').css('margin-top', (outerHeight - innerHeight)/2);

    var outerWidth = $('menu').width();
    var innerWidth = $('.logo').width();
    $('.logo_container').css('margin-left', (outerWidth - innerWidth)/2);
}, 1);

我刚刚添加了第一行和最后一行。还有一个console.log。使用window.setTimeout，日志获取所需元素，没有window.setTimeout，日志为空。

【讨论】：

【解决方案2】：

您可能希望先将值保存在变量中。然后添加括号以获得正确的优先顺序。这会起作用。

var value = $('body').width() / (11 - 10);
$('#magic-line').css('margin-top', value); //This line is not working

console.log(value);

【讨论】：

他的代码中有id=magic-line。从他的帖子中检查这一行：> $mainNav.append("<li id='magic-line'></li>");