我有一个带有 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,255,0.5);
text-align: center;
border: 1px solid rgba(0,0,0,0.4);
-moz-border-radius: 5px;
-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 2px rgba(0,0,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});
});
关于jquery - div 中的淡入和淡出文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6269606/