Question

以下没有为背景颜色设置动画，我做错了什么？

<div style="height:100px;width:100px;background:red">animate this</div><br>
<input type="button" id="mybutton" value="start"/><br>


$("#mybutton").click(function(){
   $("div").animate({backgroundColor: 'blue'});
});

http://jsfiddle.net/bjf2L0ha/

Answer 1

您需要导入其他插件，例如jQuery UI，以便支持animate()函数中的颜色，因为jQuery本身并不是这样。

＆＃13;

$("#colorBtn").click(function() {
  $('#demodiv').animate({backgroundColor: 'blue'})
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<input type="button" id="colorBtn" value="Change Color"/><br>

<div id="demodiv" style="height:100px;width:100px;background:red"></div>

＆＃13;

Answer 2

尝试在css

的background-color选项中为step .animate()属性设置

var props = {
    from: 255,
    to: 0
  },
  div = $("div"),
  button = $("#mybutton");

button.click(function() {

  $(props).finish().animate({
    // toggle between "blue" , "red"
    from: props.from === 255 ? 0 : 255,
    to: props.to === 0 ? 255 : 0
  }, {
    easing: "linear",
    duration: 3000,
    step: function() {
      div.css("backgroundColor"
                   , "rgb(" 
                     + Math.round(this.from) 
                     + ", 0, " 
                     + Math.round(this.to) + ")");
    }
  });
  
});

值

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="display:block;height:100px;width:100px;background-color:red">animate this</div>
<br>
<input type="button" id="mybutton" value="start" />
<br>

＆＃13;

public Number getX(int series, int index) {
    if (index >= SAMPLE_SIZE) {
        throw new IllegalArgumentException();
    }
    return index;
}

＆＃13;

如何在jQuery中为背景颜色制作动画？

2 个答案: