动画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);
    })
});

小提琴