javascript - 在 javascript 函数中使用 jquery animate

Question

我只有一个 div，background color 覆盖了整个名为“colorPanel”的 View (使用html ID)。

这段代码没有运行，我不明白为什么。

当我将 col 更改为 $col 时，它仍然无法运行。

我对 jquery 有什么不了解的地方？

function animateColors(i){
    var val = 1/0.2*(i) * 210;
    var col = 'hsla('+val+', 90%, 60%, 1)';
    $("#colorPanel").animate({"background-color": col}, 200);
    i = (i<180)? i+4 : 0;
    animateColors(i);
}

animateColors();

Answer 1

Already @brut & @tiantang suggest the valid point as comment. please consider that.

You arent passing anything to the initial call to animateColors(). Is this a typeo? If not i is undefined for the initial run of the program. Also there is no terminating condition for your recursive function.

From the documentation, "The .animate() method allows us to create animation effects on any numeric CSS property." and "For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used". Depending on your requirements, you could just use a CSS transition.

根据这些评论，我将对您的代码进行更改。

$(document).ready(function(){
    function animateColors(i){
        var val = 1/0.2*(i) * 210;
        var col = 'hsla('+val+', 90%, 60%, 1)';
        $("#colorPanel").css({"background-color": col});
        i = (i<180)? i+4 : 0;
        // animateColors(i); // when using this too much recursion error occur
        setTimeout( function(){animateColors(i)}, 500);
    }
    animateColors(1);
});

#colorPanel {
  height: 20px; /*your wish*/
  width: 100%; /*your wish*/
  transition: all ease 0.5s; /*for animation effect*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="colorPanel"></div>

希望对您有所帮助。