javascript 动画 HTML 文本更改 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17204009/
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
Animating HTML Text Change jQuery
提问by GoodPie
I am attempting to change the text of a HTML element using javascript and jquery. This is my code so far, and I can't seem to get it to work. I have googled it and can't seem to find anything on it.
我正在尝试使用 javascript 和 jquery 更改 HTML 元素的文本。到目前为止，这是我的代码，我似乎无法让它工作。我用谷歌搜索了一下，似乎找不到任何关于它的东西。
$("div#title").hover(
function() {
$(this).stop().animate({
$("div#title").html("Hello")
}, "fast");
},
function(){
$(this).stop.animate({
$("div#title").html("Good Bye")
}, "fast");
}
);
Any help would be greatly apreciated.
任何帮助将不胜感激。
回答by Shaddow
$("div#title").hover(
function () {
$(this).stop().html("Hello").hide(0).fadeIn("fast");
},
function () {
$(this).stop().html("Good Bye").hide(0).fadeIn("fast");
}
);
回答by PSL
The way you are doing currently the syntax is incorrect, also you cannot animate a text as such instead you would need to animate an element holding the text. Also not clear on what peoprty you want to animate, Here couple of examples:
您目前所做的方式语法不正确，您也无法为文本设置动画，而需要为包含文本的元素设置动画。也不清楚你想要动画的人，这里有几个例子：
Animating Opacity:
动画不透明度：
$("div#title").hover(
function () {
$(this).stop().css('opacity', '0').html(function (_, oldText) { // Set the opacity of the div to 0 and then change the html (flip it based on last value)
return oldText == 'Good Bye' ? 'Hello' : 'Good Bye'
}).animate({
opacity: 1 // Animate opacity to 1 with a duration of 2 sec
}, 2000);
});
Fiddle
小提琴
Animating Width:
动画宽度：
$("div#title").hover(
function () {
$(this).stop().animate({
'width': '0px' // Animate the width to 0px from current width
}, 2000, function () { // On completion change the text
$(this).html(function (_, oldText) {
return oldText == 'Good Bye' ? 'Hello' : 'Good Bye'
}).animate({ // and animate back to 300px width.
'width': '300px'
}, 2000);
})
});
Fiddle
小提琴
回答by Shinov T
You can try this also
你也可以试试这个
$("div#title").hover(
function() {
$(this).stop().fadeOut("slow",function(){
$(this).html("Hello")
}).fadeIn("slow");
},
function(){
$(this).stop().fadeOut("slow", function(){
$(this).html("Good Bye")
}).fadeIn("slow");
});
回答by Moss
Typing Style
打字风格
<font size="7" style="position:absolute; left:0px; top:0px; width:150px; z-index:50;">Hello World!</font>
<div id="test" style="position:absolute; left:0px; top:0px; height:100px; width:150px; z-index:60; background-color: #ffffff;"></div>
$('#test').animate({"left" : "150"}, 2000);
$('#test').animate({"left" : "150"}, 2000);
回答by Washington Guedes
I've coded one plugin for that purpose, you can check it on github: jquery-bubble-text.
我为此编写了一个插件，您可以在 github 上查看它：jquery-bubble-text。
You can use it this way:
你可以这样使用它：
bubbleText({
element: $element, // must be one DOM leaf node
newText: 'new Text', // must be one string
});
Look one example in this jsfiddle.
看看这个jsfiddle 中的一个例子。
Hope you enjoy it :)
希望你喜欢它 ：）
回答by El Flaco
The text can not really encouraged, you can change the content using html method. Lettering.js is a plugin to play in a more visual with text. http://letteringjs.com/
文字不能真正鼓励，您可以使用html方法更改内容。Lettering.js 是一个插件，可以更直观地播放文本。 http://letteringjs.com/
$("#title").hover(function(){
$(this).html("Hello");
},function(){
$(this).html("Good Bye");
});
回答by Dangerousgame
Select a HTML element. Here' my example:
选择一个 HTML 元素。这是我的例子：
<h1 id="heading">Heading1</h1>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
//Changing the text part
$("#heading").text("1Heading");
// No needed code
var read = document.getElementById("heading");
var text = read.value;
console.log(text);
//Should be 1Heading
</script>
Make sure you load the jQuery first:
确保首先加载 jQuery：
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
