如何将display：inline-block添加到jQuery fadeIn
[英]How to add display:inline-block to jQuery fadeIn
问题描述
I'm running into an issue where I am attempting to get inline-block elements to display: none on page load, but then I want them to fadeIn one by one in their original inline-block form. 
我遇到一个问题，试图display: none内联块元素display: none页面加载时display: none ，但是随后我希望它们以其原始inline-block形式逐一淡入。 However, when I do a normal jQuery fadeIn the elements display as block. 但是，当我执行常规的jQuery fadeIn ，元素将显示为块。
My jQuery is like this right now: 我的jQuery现在就像这样：
function blueBoxDelays(){
$('.fadeBlock1').delay(200).fadeIn(500);
$('.fadeBlock2').delay(400).fadeIn(500);
};
CSS 的CSS
.dark-blue-box, .light-blue-box {
height: 50%;
width: 25%;
display: inline-block;
/*display: none; ********I replaced the inline-block with this.
vertical-align: top;
padding: 0;
margin: 0;
transition: all .8s ease-in-out;
}
Is there something I can do to the jQuery to get these to fadeIn as inline-block elements? 我可以对jQuery做些什么来使fadeIn作为inline-block元素fadeIn吗？
4 个解决方案
解决方案1
2 已采纳 2016-02-23 06:26:08
You can try this, 你可以试试看
$(document).ready(function(e) { $('.fadeBlock').css('display','none'); blueBoxDelays(); function blueBoxDelays(){ var delay = 0; $('.fadeBlock').each(function(i){ $(this).delay(400+delay).fadeIn(1000); delay = 400*(i+1); }); }; });
.fadeBlock { height: 100px; width: 100px; display: inline-block; } .dark-blue-box{ background-color: blue; } .light-blue-box{ background-color: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dark-blue-box fadeBlock"></div> <div class="light-blue-box fadeBlock"></div> <div class="dark-blue-box fadeBlock"></div> <div class="light-blue-box fadeBlock"></div> <div class="dark-blue-box fadeBlock"></div> <div class="light-blue-box fadeBlock"></div>
Note: 注意：
Remove the opacity from .dark-blue-box, .light-blue-box 从.dark-blue-box, .light-blue-box删除不透明度
解决方案2
1 2016-02-23 05:36:11
you could achieve the desired result by using opacity with transition property. 您可以通过使用带有过渡属性的不透明度来获得所需的结果。
initially it'd be 最初是
.fadeBlock1 {
opacity:0;
transition: all 0.5s ease-in-out;
}
$('.fadeBlock1').css('opacity','1');
解决方案3
1 2016-02-23 06:10:25
Do you want something like this?? 你想要这样的东西吗？
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
.dark-blue-box{
display:inline-block;
border:1px solid #19248c;
background-color:#19248c;
height:50px;
width:50px;
}
.light-blue-box{
display:inline-block;
border:1px solid #6699cc;
background-color:#6699cc;
height:50px;
width:50px;
}
</style>
</head>
<body>
<div class='dark-blue-box'>
</div>
<div class='light-blue-box'>
</div>
<script>
$(document).ready(function(e) {
$('.dark-blue-box').css('display','none');
$('.light-blue-box').css('display','none');
boxFadeIn();
});
function boxFadeIn(){
$('.dark-blue-box')
.delay(200)
.fadeIn(500)
.queue(function (next) {
$(this).css('display', 'inline-block');
next();
});
$('.light-blue-box')
.delay(400)
.fadeIn(500)
.queue(function (next) {
$(this).css('display', 'inline-block');
next();
});
}
</script>
</body>
</html>
解决方案4
0 2016-02-23 05:38:21
try this one 试试这个
function blueBoxDelays(){
$('.fadeBlock1').delay(200).fadeIn(500).css('display','inline-block');
$('.fadeBlock2').delay(400).fadeIn(500).css('display','inline-block');
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.