动画HTML文本更改jQuery [英] Animating HTML Text Change jQuery

问题描述

我试图使用javascript和jquery更改HTML元素的文本。这是我的代码到目前为止，我似乎无法得到它的工作。

  $（div＃title）。hover（ 
函数（）{
 $（this）.stop（）。animate（{
 $（div＃title）。html（Hello）
}，快速）; 
}，
 function（）{
 $（this）.stop.animate（{
 $（div＃title）。html（Good Bye ）
}，fast）; 
} 
）; 
  

任何帮助都会大大降低。

解决方案

你目前的做法是语法不正确，你也不能为这样的文本设置动画效果，而是需要为保存文本的元素设置动画效果。也不清楚你想要动画的人物，这里举几个例子：

动画不透明度：

<$ p $ （$'code> $（div＃title）。hover（

function（）{
$（this）.stop（）。css（'opacity'， '0'）。html（function（_，oldText）{//将div的不透明度设置为0，然后更改html（基于上一个值进行翻转）
return oldText =='Good Bye'？ 'Hello'：'Good Bye'
}）。animate（{
opacity：1 // Animate a opacity to 1 with duration of 2 sec
}，2000）;
}）;

小提琴

动画宽度：

  $（ $ div $ title）。hover（
 
 function（）{
 $（this）.stop（）。animate（{$ b $'width'：'0px'//将宽度从当前宽度
}，2000，function（）{//完成后更改宽度为0px更改文本
 $（this）.html（function（_，oldText）{
 return oldText =='Good Bye'？'Hello'：'Good Bye'
}）。animate（{// and animate back to 300px width。
'width'：'300px'
 }，2000）; 
}）
}）; 
  

小提琴

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.

$("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.

解决方案

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

这篇关于动画HTML文本更改jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！