jquery - 更改 <div> 部分的背景颜色

标签 jquery jquery-animate

我正在尝试使用jQuery更改 <div> 的背景颜色按下按钮时的部分,下面是执行此操作的代码。为什么不起作用?

HTML 文件

<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="script.js"></script>
<style type="text/css"> 
#name{
background-color: #FFFFF2;
width: 100px;
}
</style>
</head>
<body>
<input type="button" id="bgcolor" value="Change color"/>
<div id="name">
Abder-Rahman
</body>

</html>

script.js

$("bgcolor").click(function(){
    $("#name").animate(
        {backgroundColor: '#8B008B'},
        "fast");}
);

谢谢。

最佳答案

您有几个问题:

  1. 您的选择器错误:$("#bgcolor")
  2. 您缺少结束语 </div>标签。
  3. 您需要jQueryUI动画 background-color .

HTML:

<input type="button" id="bgcolor" value="Change color"/>
<div id="name">
Abder-Rahman
</div>

JS:

$("#bgcolor").click(function(){
    $("#name").animate(
        {backgroundColor: '#8B008B'},
        "fast");}
);

您的代码已修复(包括使用 jQueryUI):http://jsfiddle.net/andrewwhitaker/rAVj9/

关于jquery - 更改 <div> 部分的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7622170/

相关文章:

javascript - toggleClass 用于执行两种不同的 scrollTop 方法,不起作用

javascript - 如何使用 Jquery .animate() 函数创建连续滚动的内容?

jquery - 单击按钮时如何使用 Jquery 制作缩小和增长效果的动画?

jquery - "Uncaught RangeError: Maximum call stack size exceeded"调用 $.ajax jquery 函数时

javascript - 如何在 HTML 和 jQuery 中跟踪类似的内容?

javascript - 将div滑动到屏幕顶部

jquery - 如何使用 Jquery 制作数字动画

jQuery.click() :active

javascript - 如何将带有 URL 的文本作为参数安全地传递给 CodeIgniter Controller ?

javascript - 方法未定义