Question

我想使用jQuery制作元素的自定义height。 height正在被更改，但每次都会在页面加载时显示效果（如闪烁效果）。如何解决这个问题？

＆＃13;

$(document).ready(function() {
  $('.jQuery-Container').height('100px');
});

＆＃13;

.jQuery-Container {
  background-color: Red;
  height: 700px;
  width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jQuery-Container">
  This is text..!!
</div>

＆＃13;

正在更改div的页面加载高度，但在页面完全加载后。我想在页面完全加载之前更改高度。

您可以查看我的jsfiddle here。

Answer 1

你可以这样做，你在元素之后立即运行一个脚本，只要它是普通的javascript，它就可以工作。

.JS-Container {
  background-color: Red;
  height: 700px;
  width: 200px;
}

<head>
  <script>
    function changeThis(sel) {
      document.querySelector(sel).style.cssText = 'height: 100px;';
    }
  </script>
</head>
<body>

  <div class="JS-Container">
    This is a sample text
  </div>
  <script>changeThis('.JS-Container');</script> <!-- this will run before page is fully
                                                 loaded, so no "blink" will occur -->


</body>

Answer 2

让你的div首先被隐藏然后你的jquery逻辑使div可见 CSS

.jQuery-Container {
  background-color: Red;
  height: 700px;
  width: 200px;
  display:none;
}

JS

$(document).ready(function(){
    $('.jQuery-Container').height('100px').show();
});

如何在页面完全加载之前将jQuery效果应用于元素？

2 个答案: