jquery css在document.ready上不工作

-2

我的jquery代码中有一行不起作用于document.ready函数之后。其他人工作。jquery css在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>

来源

2014-12-03 Jesse Uilenreef

还没有测试过，但什么行不行？你把这件事留下了，还是我错过了？ – Todd 2014-12-03 09:59:58

@Benjamin我没有加载图书馆，但我没有在这里展示它。但现在我做到了。 – 2014-12-03 10:01:59

@Todd行后有一条评论。它是： $（'＃magic-line'）。css（'margin-top'，$（'body'）。width（）/ 11 - 10）; – 2014-12-03 10:03:20

您可能需要先将值保存在变量中。然后添加括号以获得正确的优先顺序。这将工作。

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

console.log(value);

来源

2014-12-03 10:11:22 sidneydobber

他的代码中有'id = magic-line'。从他的帖子中检查以下行：>'$ mainNav.append（“

”）;' – 2014-12-03 10:19:45

糟糕！将更正。 – sidneydobber 2014-12-03 11:54:25

您的问题是，该$('#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日志是空的。

来源

2014-12-03 10:04:44

jquery css在document.ready上不工作

回答

相关问题