改变背景颜色

我用这个例子试验 jquery:

 $(document).ready(function(){
$("button").mouseover(function(){
$("p#44.test").css("background-color","yellow");
$("p#44.test").hide(1500);
$("p#44.test").show(1500);
$("p#44.test").css("background-color","red");
});
});

我预计会发生以下情况:

1. Color of <p> to turn yellow
2. <p> to slowly fade
3. <p> to slowly show
4. Color of <p> to turn red

但事实是这样的:

1. <p> turned red
2. <p> slowly hid away
3. <p> slowly showed

为什么？

613485 次浏览
小开

试着在最后一个颜色褪色上加一个延迟。

$("p#44.test").delay(3000).css("background-color","red");

HTML 中 id 属性的有效值是什么？
身份证不能以数字开头! ! ！

小开
最佳答案

.css()函数不会在运行动画后面排队，它是即时的。

为了符合你所追求的行为，你需要做以下事情:

$(document).ready(function() {
$("button").mouseover(function() {
var p = $("p#44.test").css("background-color", "yellow");
p.hide(1500).show(1500);
p.queue(function() {
p.css("background-color", "red");
});
});
});

.queue()函数等待运行的动画运行完毕，然后触发所提供函数中的任何内容。

小开

事情应该是这样的:

密码:

$(function(){
$("button").mouseover(function(){
var $p = $("#P44");
$p.stop()
.css("background-color","yellow")
.hide(1500, function() {
$p.css("background-color","red")
.show(1500);
});
});
});

演示: Http://jsfiddle.net/p7w9w/2/

说明:

在切换背景颜色之前，必须等待动画函数的回调。您也不应该只使用数字 ID: s，如果您有 <p>的 ID，那么您不应该在您的选择器中包含类。

我还增强了代码(jQuery 对象的缓存、链接等)

更新: 正如 VKolev建议的那样，当物品被隐藏时，颜色正在改变。


提交答案