Question

是否可以在点击功能中设置背景颜色变化的动画？我看到许多带鼠标悬停/悬停功能的例子但没有带点击功能的例子。只有没有动画跟随线路工作：

$('#element').css({ backgroundColor: "#99cc00" });

我尝试添加动画效果：

$('#element').animate({ backgroundColor: '#ffffff' }, 2000);

和

$('#element').css({ backgroundColor: "#99cc00" }).animate({}, 2500);

但没有效果。请看看我的小提琴： http://jsfiddle.net/dna6B/

有什么想法吗？

Answer 1

在项目中加入JqueryUI。

$('#element').animate({backgroundColor:'#99cc00'}, 2500);

<强> Demo

Answer 2

您可以使用JQuery UI执行此操作。

$('#element').click(function () {
    $(this).stop().animate({backgroundColor:'#99cc00'}, 2500);
});

的版本

Answer 3

为您使用jqueryUI

所需的背景颜色设置动画

让我们说你当前的#element背景是＃000000

然后这样做

$('#element').click(function() {
    $('#element').animate({ backgroundColor: '#ffffff' }, 2000);
});

将在2秒内将背景的动画从黑色变为白色。

因此，您需要将此包含在头部html中，以及常规jquery

<head>

<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

</head>