这篇博客探讨了如何使用jQuery来创建文本动画，包括改变不透明度和宽度。示例代码展示了在鼠标悬停时，如何使文本元素的不透明度从1变为0并切换内容，然后在2秒内回弹到1。此外，还展示了如何通过动画调整文本元素的宽度，从当前宽度缩小到0，然后在完成时扩展回300px，同时改变文本内容。
您目前的方式是语法不正确,也无法为文本设置动画,而是需要为包含文本的元素设置动画.还不清楚你想要制作什么样的动画,这里有几个例子：
动画不透明度：
$("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);
})
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
