淡入淡出div中的文本而不隐藏div
问题描述:
我是jquery学徒,我遇到以下问题。 我有一系列的子弹,我正在操纵的效果。 这是一个带完整代码的JSfiddle。淡入淡出div中的文本而不隐藏div
以下是我试图操纵HTML:
<div class="bullets_container">
<div class="box"> <div class="bullet">1</div> </div>
<div class="box"> <div class="bullet">2</div> </div>
<div class="box"> <div class="bullet">3</div> </div>
</div>
我想最初隐藏<div>
的一类子弹里面的数字不隐藏实际<div>
,因为我使用它的CSS属性为我的动画。
当我点击按钮并开始动画时,我希望html淡入。 另外,我很难定位html,因此它完全位于圆心的中心。
答
裹在子弹号码的跨度(或你喜欢的另一个标签):(正相对的顶部/左/下/右可以方便位置调整)
<div class="bullet"><span>1</span></div>
添加一些CSS给他们:
.bullet span {
display: none;
position: relative;
top: -4px;
}
,写按钮单击回调,像这样(使用jQuery的跨度展()和隐藏()):
$("button").on("click",function(){
if(s==1)clearInterval(interval), s = 0;
else startInterval();
var blt = $(".bullet").eq(i-1),
spn = $('span', blt);
if(!blt.hasClass("active")){
blt.removeClass("inactive").addClass("active");
spn.show(500);
} else {
blt.toggleClass("inactive").removeClass("active");
spn.hide(500);
}
});
工作DEMO here。
答
就可以达到你想要的下面用data()
什么:DEMO
var $bullet = $(".bullet"),
bulletLength = $bullet.length,
i = 1,
s =0;
function StartInverval(){
interval = setInterval(function(){
s=1;
$bullet.removeClass("shine").eq(i).addClass("shine");
if(i < bulletLength){
i++;
} else {
i = 0;
}
},100);
}
StartInverval();
$("button").on("click",function(){
if(s==1){
clearInterval(interval)
s=0;
} else {
StartInverval();
}
if(!$(".bullet").eq(i-1).hasClass("active")){
$(".bullet").eq(i-1).removeClass("inactive").addClass("active").data('number',$(".bullet").eq(i-1).html()).html('');
} else {
$(".bullet").eq(i-1).toggleClass("inactive").removeClass("active").html($(".bullet").eq(i-1).data('number'));
}
});
答
正如其他人已经指出的那样(该网站去了只读,而我是这个昨天写作),你应该换行<span>
元素内的文字,并使用jQuery fadeIn()
和方法来激活其可见性。
我修改你的代码,而我相信更可读的东西,并调整了CSS居中对齐文本:
var $bullets = $(".bullet"),
bullets = $bullets.length,
interval = null;
function StartInverval() {
interval = setInterval(function() {
var $active = $bullets.filter(".shine"),
currentIndex = $bullets.index($active),
$next = (currentIndex >= bullets) ? $bullets.eq(0) : $bullets.eq(++currentIndex);
$active.removeClass("shine");
$next.addClass("shine");
}, 100);
}
$("button").on("click", function() {
if (interval) {
clearInterval(interval);
interval = null;
$(".shine").addClass("active").find(".text").fadeIn();
} else {
$(".active").removeClass("active").find(".text").fadeOut();
StartInverval();
}
});
StartInverval();
body {
background: #767676;
}
button {
position: absolute;
top: 10%;
}
.bullets_container {
position: absolute;
top: 40%;
left: 30%;
}
.box {
float: left;
width: 50px;
height: 50px;
}
.bullet {
box-sizing: border-box;
width: 10px;
height: 10px;
border-radius: 50%;
opacity: 0.3;
text-align: center;
background: white;
}
.bullet.shine {
opacity: 1;
}
.bullet.active {
width: 30px;
height: 30px;
line-height: 30px;
border: 2px solid white;
margin: -6px;
background: transparent;
transition: 1s;
}
.bullet .text {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click Me</button>
<div class="bullets_container">
<div class="box">
<div class="bullet shine"><span class="text">1</span>
</div>
</div>
<div class="box">
<div class="bullet"><span class="text">2</span>
</div>
</div>
<div class="box">
<div class="bullet"><span class="text">3</span>
</div>
</div>
<div class="box">
<div class="bullet"><span class="text">4</div>
</div>
<div class="box">
<div class="bullet"><span class="text">5</span>
</div>
</div>
<div class="box">
<div class="bullet"><span class="text">6</span>
</div>
</div>
<div class="box">
<div class="bullet"><span class="text">7</span>
</div>
</div>
</div>
问题是什么?你问你是否可以有一个空格或单个空格(' ')div?你问的是如何从视图中隐藏div('display:none'或'visibility:hidden')?或者你问如何围绕文本放置一个圆圈? – Sukima 2014-11-01 16:10:26