动画HTML文本更改jQuery

Question

我正在尝试使用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");
    }
);

Answer 1

$("div#title").hover(
    function () {
        $(this).stop().html("Hello").hide(0).fadeIn("fast");
    },
    function () {
        $(this).stop().html("Good Bye").hide(0).fadeIn("fast");
    }
);

jsFiddle示例

Answer 2

你目前正在做的语法是不正确的，你也不能动画文本，而不是你需要动画的元素持有文本。也不清楚你想要动画的人物，这里有几个例子:

动画不透明度:

$("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);
});

小提琴

动画宽度:

$("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);
    })
});

小提琴

Answer 3

你也可以试试这个

$("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");
});

Answer 4

文本不能真正鼓励，可以使用html方法更改内容。js是一个插件，在一个更可视化的文本中发挥作用。http://letteringjs.com/

$("#title").hover(function(){
    $(this).html("Hello");
},function(){
    $(this).html("Good Bye");
});

Answer 5

字体样式

<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>

$("#测试")。Animate ({"left": "150"}， 2000);

Answer 6

我已经为此编写了一个插件，您可以在github上查看它:jquery-bubble-text。

你可以这样使用:

bubbleText({
    element: $element,      // must be one DOM leaf node
    newText: 'new Text',    // must be one string
});

看下面的一个例子。

希望你喜欢