How to apply a jQuery effect to an element before page is fully loaded?
Question
I want to make custom height of an element using jQuery. height is being changed but an effect (like blink effect) is being shown on page load every time. How to solve this problem?
$(document).ready(function() { $('.jQuery-Container').height('100px'); });
.jQuery-Container { background-color: Red; height: 700px; width: 200px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="jQuery-Container"> This is text..!! </div>
On page load height of the div is being changed but after the page is fully loaded. I want to change height before the page is fully loaded.
You can See my jsfiddle here .
2 answers
solution1
1 ACCPTED 2017-04-27 10:25:41
You could do like this, where you run a script immediately after the element, and as long as it is plain javascript, it will work.
.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>
solution2
0 2017-04-27 10:18:13
make you div first hidden then after your jquery logic make div visible CSS
.jQuery-Container {
background-color: Red;
height: 700px;
width: 200px;
display:none;
}
JS
$(document).ready(function(){
$('.jQuery-Container').height('100px').show();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.