jQuery 使用 .animate 更改文本 (html)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6305667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change text (html) with .animate
提问by Jeff
I am trying to animate the html part of a tag ( <font id="test" size="7">This Text!</font>) using jQuery's Animate function, like so:
我正在尝试<font id="test" size="7">This Text!</font>使用 jQuery 的 Animate 函数为标签 ( )的 html 部分设置动画，如下所示：
$("#test").delay(1500).animate({text:'The text has now changed!'},500);
However nothing happens, it does not change the text.
但是没有任何反应，它不会改变文本。
How can I do this? Thanks!
我怎样才能做到这一点？谢谢！
回答by Kevin
The animate(..)function' signature is:
该animate(..)功能”签名是：
.animate( properties, options );
And it says the following about the parameter properties:
它说明了有关参数的以下内容properties：
properties A map of CSS properties that the animation will move toward.
properties 动画将移向的 CSS 属性映射。
textis not a CSS property, this is why the function isn't working as you expected.
text不是 CSS 属性，这就是该函数无法按预期工作的原因。
Do you want to fade the text out? Do you want to move it? I might be able to provide an alternative.
你想淡出文本吗？你想移动它吗？我也许可以提供一个替代方案。
Have a look at the following fiddle.
看看下面的小提琴。
回答by jalmatari
$("#test").hide(100, function() {
$(this).html("......").show(100);
});
Updated:
更新：
Another easy way:
另一个简单的方法：
$("#test").fadeOut(400, function() {
$(this).html("......").fadeIn(400);
});
回答by Washington Guedes
I was looking for something like that some days ago, but as I didn't had much time, I ended up using the easier fadeIn/fadeOut, as others had answered.
几天前我正在寻找类似的东西，但由于我没有太多时间，我最终使用了更简单的淡入/淡出，正如其他人所回答的那样。
But the idea of animating text didn't left my mind and further I coded my own plugin (named jquery-bubble-text).
但是动画文本的想法并没有离开我的脑海，我进一步编写了自己的插件（名为jquery-bubble-text）。
You can check it on github, or see this jsfiddle.
你可以在github 上查看，或者查看这个jsfiddle。
The syntax is the following:
语法如下：
bubbleText({
element: $element, // must be one DOM leaf node
newText: 'new Text', // must be one string
});
Hope you enjoy it :)
希望你喜欢它 ：）
回答by ClearCloud8
Following the suggestion by JiminP....
按照 JiminP 的建议......
I made a jsFiddle that will "smoothly" transition between two spans in case anyone is interested in seeing this in action. You have two main options:
我制作了一个 jsFiddle，它将在两个跨度之间“平滑”转换，以防有人有兴趣看到它的实际效果。您有两个主要选择：
- one span fades out at the same time asthe other span is fading in
- one span fades out followed bythe other span fading in.
- 一个跨度在另一个跨度淡入的同时淡出
- 一个跨度淡出，然后另一个跨度淡入。
The first time you click the button, number 1 above will occur. The second time you click the button, number 2 will occur. (I did this so you can visually compare the two effects.)
第一次单击按钮时，将出现上面的数字 1。第二次单击该按钮时，将出现数字 2。（我这样做是为了让您可以直观地比较这两种效果。）
Try it Out: http://jsfiddle.net/jWcLz/594/
试试看：http: //jsfiddle.net/jWcLz/594/
Details:
细节：
Number 1 above (the more difficult effect) is accomplished by positioning the spans directly on top of each other via CSS with absolute positioning. Also, the jQuery animates are not chained together, so that they can execute at the same time.
上面的第 1 项（更难的效果）是通过使用绝对定位的 CSS 将跨度直接放置在彼此之上来实现的。此外，jQuery 动画没有链接在一起，因此它们可以同时执行。
HTML
HTML
<div class="onTopOfEachOther">
<span id='a'>Hello</span>
<span id='b' style="display: none;">Goodbye</span>
</div>
<br />
<br />
<input type="button" id="btnTest" value="Run Test" />
CSS
CSS
.onTopOfEachOther {
position: relative;
}
.onTopOfEachOther span {
position: absolute;
top: 0px;
left: 0px;
}
JavaScript
JavaScript
$('#btnTest').click(function() {
fadeSwitchElements('a', 'b');
});
function fadeSwitchElements(id1, id2)
{
var element1 = $('#' + id1);
var element2 = $('#' + id2);
if(element1.is(':visible'))
{
element1.fadeToggle(500);
element2.fadeToggle(500);
}
else
{
element2.fadeToggle(500, function() {
element1.fadeToggle(500);
});
}
}
回答by Twig
If all you're looking to do is change the text you could do exactly as Kevin has said. But if you're trying to run an animation as well as change the text you could accomplish this by first changing the text then running your animation.
如果您想要做的只是更改文本，您可以完全按照凯文所说的那样做。但是，如果您尝试运行动画以及更改文本，则可以通过先更改文本然后运行动画来完成此操作。
For Example:
例如：
$("#test").html('The text has now changed!');
$("#test").animate({left: '100px', top: '100px'},500);
Check out this fiddle for full example:
查看此小提琴以获取完整示例：
回答by denesis
For fadeOut => change text => fadeIn effect We need to animate the wrapper of texts we would like change.
对于淡出 => 更改文本 => 淡入效果 我们需要为我们想要更改的文本的包装器设置动画。
Example below:
下面的例子：
HTML
HTML
<div class="timeline-yeardata">
<div class="anime">
<div class="ilosc-sklepow-sticker">
<span id="amount">1400</span><br>
sklepów
</div>
<div class="txts-wrap">
<h3 class="title">Some text</h3>
<span class="desc">Lorem ipsum description</span>
</div>
<div class="year-bg" id="current-year">2018</div>
</div>
</div>
<div class="ch-timeline-wrap">
<div class="ch-timeline">
<div class="line"></div>
<div class="row no-gutters">
<div class="col">
<a href="#2009" data-amount="9" data-y="2009" class="el current">
<span class="yr">2009</span>
<span class="dot"></span>
<span class="title">Lorem asdf asdf asdf a</span>
<span class="desc">Ww wae awer awe rawer aser as</span>
</a>
</div>
<div class="col">
<a href="#2010" data-amount="19" data-y="2010" class="el">
<span class="yr">2010</span>
<span class="dot"></span>
<span class="title">Lorem brernern</span>
<span class="desc">A sd asdkj aksjdkajskd jaksjd kajskd jaksjd akjsdk jaskjd akjsdkajskdj akjsd k</span>
</a>
</div>
</div>
</div>
</div>
JQuery JS
查询JS
$(document).ready(function(){
$('.ch-timeline .el').on('click', function(){
$('.ch-timeline .el').removeClass('current');
$(this).addClass('current');
var ilosc = $(this).data('ilosc');
var y = $(this).data('y');
var title = $(this).find('.title').html();
var desc = $(this).find('desc').html();
$('.timeline-yeardata .anime').fadeOut(400, function(){
$('#ilosc-sklepow').html(ilosc);
$('#current-year').html(y);
$('.timeline-yeardata .title').html(title);
$('.timeline-yeardata .desc').html(desc);
$(this).fadeIn(300);
})
});
});
Hope this will help someone.
希望这会帮助某人。
回答by Hoàng V? Tgtt
See Davion's anwser in this post: https://stackoverflow.com/a/26429849/1804068
在这篇文章中查看 Davion 的 anwser：https://stackoverflow.com/a/26429849/1804068
HTML:
HTML：
<div class="parent">
<span id="mySpan">Something in English</span>
</div>
JQUERY
查询
$('#mySpan').animate({'opacity': 0}, 400, function(){
$(this).html('Something in Spanish').animate({'opacity': 1}, 400);
});
回答by wpcoder
refer to official jquery example: and play with it.
参考官方 jquery 示例：并使用它。
.animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
