淡入和淡出 div 中的文本 [英] Fade In and Fade Out text inside a div

问题描述

我有一个带有 CSS 样式的 div，可以将其显示为按钮:

Word 1

和 CSS 样式:

.btn {显示:内联块；背景:网址(btn.bg.png)repeat-x 0px 0px；填充:5px 10px 6px 10px；字体粗细:粗体；文本阴影:1px 1px 1px rgba(255,255,255,0.5);文本对齐:居中；边框:1px 实心 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 {背景色:#CCCCCC;颜色:#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("新文本").animate({opacity:1});})});

http://jsfiddle.net/8Dtr6/

轻微修正，只要你立即淡入它似乎不是使用 fadeIn 和 fadeOut 的问题，至少在 chrome 中.我希望在较小的浏览器中可能会看到轻微的闪烁，但可能是错误的.

使用队列避免回调可能会更简洁:

$(".button").click(function(){$(this).find("span").animate({不透明度:0}).队列(功能(){$(this).text("新文本").dequeue()}).animate({opacity:1});});

http://jsfiddle.net/8Dtr6/2

I have a div with a CSS style to show it as a button:

<div id="Word1" class="btn green" onclick="WordClicked(1);">Word 1</div>

And CSS styles:

.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;}

I want to fade out text inside div, change text, and then fade in text again. But I don't want to fade in and fade out div.

If I use this javascript code:

$('#Word1').fadeOut('fast');

I will fade out div and text inside.

How can I do that?

解决方案

You want to wrap the text in a span then fade that out:

<div class="button"><span>TEXT!</span></div>

and you don't want to use fadeOut because that will change the size of your button as the text will disappear once fadeOut ends and no longer take up space. Instead animate the opacity:

$(".button").click(function(){
    $(this).find("span").animate({opacity:0},function(){
        $(this).text("new text")
            .animate({opacity:1});  
    })
});

http://jsfiddle.net/8Dtr6/

EDIT: Slight correction, as long as you immediately fade back in it does not seem to be an issue to use fadeIn and fadeOut, at least in chrome. I would expect maybe in lesser browsers to see a slight flicker, but could be wrong.

Possibly a bit cleaner using queue to avoid callbacks:

$(".button").click(function(){
    $(this).find("span")
        .animate({opacity:0})
        .queue(function(){
             $(this).text("new text")
                    .dequeue()
        })
        .animate({opacity:1});  
});

http://jsfiddle.net/8Dtr6/2

这篇关于淡入和淡出 div 中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！