gpt4 book ai didi

javascript - Jquery animate backgroundColor 不工作

转载 作者:太空宇宙 更新时间:2023-11-04 12:28:57 25 4
gpt4 key购买 nike

当您单击按钮时,我试图使背景颜色淡入(然后最终我希望它淡出)。我可以用这个改变背景的颜色:

$("#" + lblqty).css("background","#e9f1ff");

但是当我尝试使用动画(如下所示)时,它不起作用。没有任何反应,我什至没有收到 javascript 错误:

$("#" + lblqty).animate({ backgroundColor: "#e9f1ff"}, 800);

我将代码放在 JSFiddle 中,这样您就可以看到它的运行情况。应该发生的是当您单击“元素”或选中复选框时,应该出现一个显示“数量 1”以及 + 和 - 符号的 div。当您单击 + 号时,它应该将数量增加 1 并且背景应该改变颜色。这是链接:http://jsfiddle.net/ew52wyLm/1/

$(".calccheckbox").change(function() {
var checkid = $(this).attr("id");
var qtyid = "qty_" + checkid;
var lblqty = "qtylbl_" + checkid;
var aic = "aic_" + checkid;
if (this.checked) {
$(this).attr("value", checkid + "_1");
$("#" + qtyid).html("1");
$("#" + lblqty).show(300);
// $("#" + aic).css("background","#b6d1ff");
// $("#" + lblqty).css("background","#e9f1ff");
} else {
$(this).attr("value", checkid);
$("#" + qtyid).html("");
$("#" + lblqty).hide(300);
}
});
$(".calcaddbutton, .calcremovebutton").click(function(event) {
var button = $(this);
var checkid = $(this).attr("id");
checkid = checkid.slice(3);
var qtyid = "qty_" + checkid;
var qty = $("#" + qtyid).html();
var aic = "aic_" + checkid;
var lblqty = "qtylbl_" + checkid;
if (button.hasClass("calcaddbutton")) {
if (qty > 49) {
alert("You may only add 50 of each item");
} else {
qty++;
$("#" + qtyid).html(qty);
$("#" + checkid).attr("value", checkid + "_" + qty);
// $("#" + lblqty).css("background","#e9f1ff");
$("#" + lblqty).animate({
backgroundColor: "#e9f1ff"
}, 800);
}
}
if (button.hasClass("calcremovebutton")) {
if (qty < 2) {
$("#" + qtyid).html("");
$("#" + checkid).attr("value", checkid);
var lblqty = "qtylbl_" + checkid;
$("#" + lblqty).hide(300);
$("#" + checkid).attr("checked", false);
} else {
qty--;
$("#" + qtyid).html(qty);
$("#" + checkid).attr("value", checkid + "_" + qty);
}
}
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="additemcontainer">
<div id="aic_1170">
<label for="1170">
<input type="checkbox" class="calccheckbox" value="1170" name="items[]" id="1170" />Item</label>
</div>
<div class="qtylbl" style="display:none;" id="qtylbl_1170">Quantity: <span class="qty" id="qty_1170"></span>
<a href="#" class="calcaddbutton" id="add1170">
<div class="calcbuttoncontainer"><span class="calcbutton glyphicon glyphicon-plus">+</span>
</div>
</a> <a href="#" class="calcremovebutton" id="rem1170"><span class="calcbutton glyphicon glyphicon-minus">-</span></a>
</div>
</div>

最佳答案

您不能使用 jQuery 的默认动画功能为背景颜色设置动画。

然而,您可以做的是将另一个具有不同颜色的 div 放置在原始 div 下方,然后在原始 div 上设置不透明度动画,以便底层 div 的颜色显示出来。

关于javascript - Jquery animate backgroundColor 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27806428/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com