javascript - 我的 CSS 规则在我的 jQuery 函数执行后加载

Question

我认为 CSS 和 jQuery 的通信方式存在困难(？)。

在 CSS 中，我经常将我的规则写成直接的 child ，也增加了特异性，比如

div#container > div#contentLeft {
   //Code here
}

然后，当我尝试使用 jQuery 使我的网站令人惊叹时，CSS 规则会在我的 jQuery 代码执行后加载。我希望 CSS 在加载之前加载，这样我的动画内容就很整洁了。

这可以通过编写较少指定的代码来解决，例如:#contentLeft {}。然后当我尝试我的脚本时，CSS 被加载，然后我的脚本按预期运行。

我想编写具有高特异性的代码...但是如果我想让我的 jQuery 运行得像我想要的那样流畅，我可以吗？

JSfiddle:http://jsfiddle.net/459epctg/

$(document).ready(function() {
  $('#contentMenu').show('slide', {
    direction: 'up'
  }, 1000);
  showContent();
});

function showContent() {
  $('#menu').click(function() {
    $('#contentMenu').delay(1000).show('slide', {
      direction: 'up'
    }, 1000);
    $('#contentLocations').hide('slide', {
      direction: 'up'
    }, 1000);
    $('#contentSpecials').hide('slide', {
      direction: 'up'
    }, 1000);
    $('#contentGifts').hide('slide', {
      direction: 'up'
    }, 1000);
  });

  $('#locations').click(function() {
    $('#contentMenu').hide('slide', {
      direction: 'up'
    }, 1000);
    $('#contentLocations').delay(1000).show('slide', {
      direction: 'up'
    }, 1000);
    $('#contentSpecials').hide('slide', {
      direction: 'up'
    }, 1000);
    $('#contentGifts').hide('slide', {
      direction: 'up'
    }, 1000);
  });

  $('#specials').click(function() {
    $('#contentMenu').hide('slide', {
      direction: 'up'
    }, 1000);
    $('#contentLocations').hide('slide', {
      direction: 'up'
    }, 1000);
    $('#contentSpecials').delay(1000).show('slide', {
      direction: 'up'
    }, 1000);
    $('#contentGifts').hide('slide', {
      direction: 'up'
    }, 1000);
  });

  $('#gifts').click(function() {
    $('#contentMenu').hide('slide', {
      direction: 'up'
    }, 1000);
    $('#contentLocations').hide('slide', {
      direction: 'up'
    }, 1000);
    $('#contentSpecials').hide('slide', {
      direction: 'up'
    }, 1000);
    $('#contentGifts').delay(1000).show('slide', {
      direction: 'up'
    }, 1000);
  });
}

* {
  margin: 0;
  padding: 0;
}
body {
  overflow: hidden;
  background-color: #CDBFAC;
}
div#wrapper {
  width: 90%;
  height: auto;
  margin: 15px auto 15px auto;
}
div#navbar {
  width: 100%;
  height: 50px;
  background-color: #CDBFAC;
}
div#navbar > ul {
  list-style-type: none;
}
div#navbar > ul > li {
  display: inline-block;
  width: 175px;
  height: 50px;
  background-color: #148FC7;
  line-height: 50px;
  text-align: center;
  color: white;
  cursor: pointer;
}
div#content {
  width: 100%;
  height: auto;
  position: relative;
}
div#content > div#contentMenu {
  width: 100%;
  height: 500px;
  background-color: #004660;
  position: absolute;
  display: none;
}
div#content > div#contentLocations {
  width: 100%;
  height: 500px;
  background-color: #004660;
  display: none;
  position: absolute;
}
div#content > div#contentSpecials {
  width: 100%;
  height: 500px;
  background-color: #004660;
  display: none;
  position: absolute;
}
div#content > div#contentSpecials > ul {
  list-style-type: none;
}
div#content > div#contentGifts {
  width: 100%;
  height: 500px;
  background-color: #004660;
  display: none;
  position: absolute;
}
div#content > div#contentGifts button {
  width: 200px;
  height: 50px;
  border-radius: 5px;
  margin-left: 20px;
}
div#content > div#contentMenu > h1,
div#content > div#contentMenu > h4,
div#content > div#contentMenu > ul,
div#content > div#contentMenu > ul > li {
  color: white;
  list-style-type: none;
  margin-left: 20px;
}
div#content > div#contentLocations > h1,
div#content > div#contentLocations > p,
div#content > div#contentLocations > h4,
div#content > div#contentLocations > ul,
div#content > div#contentLocations > ul > li {
  color: white;
  list-style-type: none;
  margin-left: 20px;
}
div#content > div#contentSpecials > h1,
div#content > div#contentSpecials > p div#content > div#contentSpecials > h4,
div#content > div#contentSpecials > ul,
div#content > div#contentSpecials > ul > li {
  color: white;
  list-style-type: none;
  margin-left: 20px;
}
div#content > div#contentGifts > h1,
div#content > div#contentGifts > p,
div#content > div#contentGifts > h4,
div#content > div#contentGifts > ul,
div#content > div#contentGifts > ul > li {
  color: white;
  list-style-type: none;
  margin-left: 20px;
}
h1 {
  border-bottom: 2px solid white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrapper">
  <div id="navbar">
    <ul>
      <li id="menu">Menu</li>
      <li id="locations">Locations</li>
      <li id="specials">Specials</li>
      <li id="gifts">Gifts</li>
    </ul>
  </div>
  <div id="content">
    <div id="contentMenu">
      <h1>Menu</h1>
      <h4>This is our menu</h4>
      <ul>
        <li>Pork filé</li>
        <li>Mashed potatoes</li>
        <li>Very Bloody Steak</li>
      </ul>
    </div>
    <div id="contentLocations">
      <h1>Locations</h1>
      <p>We got 100 restaurants and this is one of 'em</p>
    </div>
    <div id="contentSpecials">
      <h1>Specials</h1>
      <ul>
        <li>BBQ on a plastic plate</li>
      </ul>
    </div>
    <div id="contentGifts">
      <h1>Gifts</h1>
      <p>All of our guests recieve an awesome gift on arrival</p>
      <button>Click to reveal the awesome gift</button>
    </div>
  </div>
</div>

Answer 1

您需要确保使用有效参数调用您的函数。你的规则加载没有问题，但你的代码有错误。你有这个代码:

$(document).ready(function(){
    $('#contentMenu').show('slide', {direction: 'up'}, 1000);
    showContent();
});

但是，.show() 没有这样的调用可能性，阅读更多 here .在阅读了代码的其他部分后，我想您想要这样:

$(document).ready(function(){
    $('#contentMenu').delay(1000).show('slide', {direction: 'up'});
    showContent();
});

参见 fiddle .每当遇到问题时，不要错过检查控制台和调试的机会。