我有一个CSS样式的div来显示它作为一个按钮：
<div id="Word1" class="btn green" onclick="WordClicked(1);">Word 1</div>
和CSS样式：
.btn {
display: inline-block;
background: url(btn.bg.png) repeat-x 0px 0px;
padding: 5px 10px 6px 10px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(255,255,0.5);
text-align: center;
border: 1px solid rgba(0,0.4);
-moz-border-radius: 5px;
-moz-Box-shadow: 0px 0px 2px rgba(0,0.5);
-webkit-border-radius: 5px;
-webkit-Box-shadow: 0px 0px 2px rgba(0,0.5);
}
.green {background-color: #CCCCCC; color: #141414;}
我想淡出div中的文本,更改文本,然后再次淡入文本.但我不想淡出淡出div.
如果我使用这个javascript代码：
$('#Word1').fadeOut('fast');
我会在里面淡出div和文字.
我怎样才能做到这一点？
解决方法
你想在一个范围中包装文本然后淡出它：
<div class="button"><span>TEXT!</span></div>
并且您不想使用fadeOut,因为这会改变按钮的大小,因为一旦fadeOut结束并且不再占用空间,文本将消失.而是为不透明度设置动画：
$(".button").click(function(){
$(this).find("span").animate({opacity:0},function(){
$(this).text("new text")
.animate({opacity:1});
})
});
编辑：轻微修正,只要你立即淡出它似乎不是一个问题使用fadeIn和fadeOut,至少在chrome中.我希望可能在较小的浏览器中看到轻微的闪烁,但可能是错误的.
可能使用队列更清洁以避免回调：
$(".button").click(function(){
$(this).find("span")
.animate({opacity:0})
.queue(function(){
$(this).text("new text")
.dequeue()
})
.animate({opacity:1});
});
