Question

我的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>

Answer 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日志为空。

Answer 2

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

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

console.log(value);

Jquery css没有在document.ready上工作

2 个答案: