jQuery/CSSを使用してページをロードするときにdivを1つずつ表示する

複数のブートストラップカラムを持つページがありますが、最初の6つを表示することですはページロード時に1つずつ表示されるdivです私はJsFiddle jQuery/CSSを使用してページをロードするときにdivを1つずつ表示する

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<style type="text/css"> 
body { 
    overflow: hidden; 
} 
.main-wrapper { 
    float: left; 
    width: 100%; 
    background: #cccccc; 
} 
.row { 
    border-bottom: 1px solid #444; 
} 
.col-md-3 { 
    border: 1px solid #444; 
} 
.overflowH { 
    overflow: hidden; 
} 
</style> 

<script type='text/javascript'> 
window.onload=function(){ 
    function setHeight() { 
     windowHeight = $(window).innerHeight(); 
     $('.fullH').css('height', windowHeight); 
    }; 
    setHeight(); 
    $(window).resize(function() { 
     setHeight(); 
    }); 
    $('.col-md-3').height(Math.round($('.col-md-3').width()) * Math.tan(0.523599)); 
    $('.row').css('transform', 'skewY(-20deg)'); 
} 
</script> 
<div class="main-wrapper"> 
    <div class="container-fluid"> 
    <div class="row fullH overflowH"> 
     <div class="col-md-3"> 
     <div class="inner">Text Here</div> 
     </div> 
     <div class="col-md-3"> 
     <div class="inner">Text Here</div> 
     </div> 
     <div class="col-md-3"> 
     <div class="inner">Text Here</div> 
     </div> 
     <div class="col-md-3"> 
     <div class="inner">Text Here</div> 
     </div> 
     <div class="col-md-3"> 
     <div class="inner">Text Here</div> 
     </div> 
     <div class="col-md-3"> 
     <div class="inner">Text Here</div> 
     </div> 
     <div class="col-md-3">Text Here</div> 
     <div class="col-md-3">Text Here</div> 
     <div class="col-md-3">Text Here</div> 
     <div class="col-md-3">Text Here</div> 
     <div class="col-md-3">Text Here</div> 
     <div class="col-md-3">Text Here</div> 
     <div class="col-md-3">Text Here</div> 
     <div class="col-md-3">Text Here</div> 
     <div class="col-md-3">Text Here</div> 
     <div class="col-md-3">Text Here</div> 
     <div class="col-md-3">Text Here</div> 
     <div class="col-md-3">Text Here</div> 
     <div class="col-md-3">Text Here</div> 
     <div class="col-md-3">Text Here</div> 
    </div> 
    </div> 
</div>

出典

2016-08-23 Sanjeev Kumar

"一つずつ"。それらの間に遅延が欲しいということを意味しますか？もしそうなら、どのくらいの遅延？ – ADyson

はい、表示されるまでに遅延があり、遅延は0.3秒か何かになるでしょう –

CSSのアドオンで、ここで作成しました：.col-md-3.show { opacity: 1; transition: .2s; } ジャバスクリプト追加：

$(".col-md-3").each(function(index) { 
    var $this = $(this); 
    setTimeout(function() { $this.addClass("show"); }, index * 200); 
    });

試してみてください。https://jsfiddle.net/snuu1958/7/

出典

2016-08-23 09:54:09

素晴らしいです、ありがとうございました！ –

これはあなたが望むものです。これを試して。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</head> 
 

 
<style type="text/css"> 
 
\t div.same{ 
 
\t \t width: 400px; 
 
\t \t height: 50px; 
 
\t \t margin: 30px; 
 
\t \t border: 5px solid yellow; 
 
\t \t display: none; 
 
\t } 
 

 
\t div#div1{ 
 
\t \t background-color: orange; 
 
\t } 
 
\t div#div2{ 
 
\t \t background-color: pink; 
 
\t } 
 

 
\t div#div3{ 
 
\t \t background-color: purple; 
 
\t } 
 
\t div#div4{ 
 
\t \t background-color: green; 
 
\t } 
 
\t div#div5{ 
 
\t \t background-color: red; 
 
\t } 
 
\t div#div6{ 
 
\t \t background-color: blue; 
 
\t } 
 

 

 
</style> 
 

 
<body> 
 
\t 
 
<div class="same" id="div1"></div> 
 
<div class="same" id="div2"></div> 
 
<div class="same" id="div3"></div> 
 
<div class="same" id="div4"></div> 
 
<div class="same" id="div5"></div> 
 
<div class="same" id="div6"></div> 
 

 

 
\t 
 
</body> 
 

 
<script type="text/javascript"> 
 
    
 
$(document).ready(function(){ 
 
    \t for(var i=0;i<6;i++) 
 
    \t { 
 
    \t \t var theid = $("#div"+i); 
 
    \t \t var thetime = 800 *i; 
 
    \t \t $(theid).show(thetime); // or use .fadeIn() 
 
    \t \t thetime = thetime * i; 
 
    \t } 
 
}); 
 

 

 

 
</script> 
 
</html>

出典

2016-08-23 10:03:13

jQuery/CSSを使用してページをロードするときにdivを1つずつ表示する

答えて

関連する問題