Jquery column test
Jquery column test
HTML
<div id="heading" style="display:none;">
<h2>Jquery column test</h2>
<div id="heading" style="display:none;">
<h2>Jquery column test</h2>
</div>
<div id="column1">Lorem ipsum dolor sit am5t, utamur vituperata ut cum. Ea viderer admodum oporteat qui. Eam aperiam signiferumque ex,, per ad agam veri recteque. Sea at consulatu cotidieque, inani meliore epicuri ut hisani melior. His ut vidit nullam.</div>
<div id="column3">Lorem ipsum dolor sit amet, utamur vituperata ut cum. Ea viderer admodum oporteat qui. Eam aperiam per ad agam veri recteque. Sea at consulatu cotidieque, inani meliore epicuri ut his. His ut vidit nullam.</div>
<div id="column2">Lorem ipsum dolor sit amet, utamur vituperata ut cum. Ea viderer admodum oporteat qui. Eam aperiam signiferumque ex signiferumque ex, per ad agam veri recteque. Sea at consulatu cotidieque, ine epicuri ut hisa. His ut vidit nullam.</div>
<div id="column4">Lorem ipsum dolor sit amet, per ad agam verata ut cum. Ea viderer admodum oporteat qui. Eam aperiam signi>
<div id="column5">Lorem ipsum dolor sit ametferumque ex, His ut vidit nullam.</div, utamur vituperata ut cum. Ea viderer admodum oporteateri recteque. Sea at consulatu cotidieque, inani meliore epicuri ut his.utamur vitup qui. Em aperiam signiferumque ex, per ad agam veri recteque. Sea at consulatu cotidieque, inani meliore epicuri ut his. His ut vidit nullam.</div>
CSS
#column1,
#column2,
#column3,
#column4,
#column5 {
width: 100px;
height: auto;
float: left;
margin-right: 10px;
margin-top: 20px;
position: relative;
padding-top: 15px;
background-color: #cccccc;
display: none;
color: #000;
font-size: 11px;
font-family: robotolight, sans-serif;
text-align: left;
line-height: 14px;
}
JavaScript
$(document).ready(function() {
$("#heading").delay(1100).show(500);
$("#column1").delay(2200).show(500);
$("#column2").delay(2200).show(500);
$("#column3").delay(2400).show(550);
$("#column4").delay(2600).show(500);
$("#column5").delay(2600).show(500);
});