Jquery 动画背景颜色不起作用

Jquery animate backgroundColor not working

本文关键字：不起作用 颜色 背景 动画 Jquery      更新时间：2023-09-26

当您单击按钮时，我正在尝试让背景颜色淡入（然后最终我希望它淡出）。 我可以用这个让背景改变颜色：

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

但是当我尝试使用动画（如下所示）时，它不起作用。什么也没发生，我什至没有收到javascript错误：

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

我将代码放在 JSFiddle 中，以便您可以看到它的实际效果。 应该发生的是，当您单击"项目"或选中复选框时，应该会出现一个div，显示"数量 1"和 + 和 - 符号。 当您单击 + 号时，它应该将数量增加 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的默认animate函数对背景色进行动画处理。

但是，您可以做的是在原始div 下方放置另一个具有不同颜色的div，然后在原始div 上对不透明度进行动画处理，以便底层div 的颜色显示出来。

您可以使用 Jquery UI 库对背景颜色进行动画处理。

包括你的jquery库和jquery ume库，它应该可以工作。

http://jqueryui.com/animate/

正如许多人提到的，这不可能用jQuery做，但用Velocity.js是可能的。 而且 Velocity .js 动画的表现要好得多，尤其是在移动设备上！

相关文章：