jQuery 淡入和淡出 div 中的文本

Fade In and Fade Out text inside a div

提问by VansFannel

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

我有一个带有 CSS 样式的 div 将其显示为按钮：

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

And CSS styles:

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

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.

我想淡出 div 中的文本，更改文本，然后再次淡入文本。但我不想淡入淡出div。

If I use this javascript code:

如果我使用这个 javascript 代码：

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

I will fade out div and text inside.

我会淡出里面的 div 和文本。

How can I do that?

我怎样才能做到这一点？

回答by James Montagne

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 fadeOutbecause that will change the size of your button as the text will disappear once fadeOutends and no longer take up space. Instead animate the opacity:

并且您不想使用，fadeOut因为这会改变按钮的大小，因为文本一旦fadeOut结束就会消失并且不再占用空间。而是为不透明度设置动画：

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

http://jsfiddle.net/8Dtr6/

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 fadeInand fadeOut, at least in chrome. I would expect maybe in lesser browsers to see a slight flicker, but could be wrong.

编辑：小幅回调，只要你马上回褪色它似乎并不成为一个问题，在使用fadeIn和fadeOut，至少在铬。我希望在较小的浏览器中可能会看到轻微的闪烁，但可能是错误的。

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

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

回答by John Hartsock

Try using the contents()function. And wrap()the Contents with another element. such as

尝试使用contents()函数。并用另一个元素wrap()内容。如

$('#Word1').contents().wrap('<div class="temporary">').parent().fadeOut('fast');

Here is a simple demo http://jsfiddle.net/7jjNq/

这是一个简单的演示http://jsfiddle.net/7jjNq/

回答by genesis

html

html

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

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

js

js

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

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

hope it helps

希望能帮助到你

回答by ScubaSteve

You could put the text "Word 1" inside a span or div, like so:

您可以将文本“Word 1”放在 span 或 div 中，如下所示：

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

Then, inside of your WordClicked() function do:

然后，在您的 WordClicked() 函数中执行以下操作：

$("#Word1Text").fadeOut("fast", function()
{
  $("#Word1Text").html("New Text").fadeIn("fast");
});

回答by Niklas

promise()is useful here, but you'll need to wrap the contents as well. This example creates a spanbut also removes it after animation. So you won't have to change your markup, nor does it change after the animation is complete.

promise()在这里很有用，但您还需要包装内容。这个例子创建了一个span但也在动画之后删除了它。因此，您不必更改标记，动画完成后也不会更改。

var v = $('#Word1');
$('<span />').text(v.text()).appendTo($(v).empty()).fadeOut('fast').promise().done(function() {
    $(this).text('Word 2').fadeIn().promise().done(function() {
    v.text($(this).text());
        $(this).remove();
  });
  });

example: http://jsfiddle.net/niklasvh/jkaYr/

示例：http: //jsfiddle.net/niklasvh/jkaYr/

editor... could have just done it with the fade callbacks. Still useful if you intend to add more animation effects to it though.

编辑或...本可以使用淡入淡出回调完成它。如果您打算为其添加更多动画效果，仍然很有用。

var v = $('#Word1');
$('<span />').text(v.text()).appendTo($(v).empty()).fadeOut('fast',function() {
    $(this).text('Word 2').fadeIn('fast',function() {
    v.text($(this).text());
        $(this).remove();
  });
  });

example: http://jsfiddle.net/niklasvh/jkaYr/15/

示例：http: //jsfiddle.net/niklasvh/jkaYr/15/

回答by Sonny

You'll need an element inside the #Word1element that is faded out/in. It doesn't need to be a <div>.

您需要在#Word1淡出/淡入的元素内有一个元素。它不需要是一个<div>.