JQuery animate() 函数延迟且运行缓慢

Question

当我调用 JQuery animate（） 调用时，浏览器会延迟它 ~1 秒，然后运行得非常慢。

JQuery 代码：

<script type="text/javascript">
    $(document).ready(function () {
        $("#header").load("global/html/header.html",function(){});
        $("#footer").load("global/html/footer.html",function(){});
        $(".navLI").hover(function() {
            $(this).animate({"backgroundColor": jQuery.Color(255, 51, 00, 255)}, 500);
            $(this).animate({"borderLeftColor": jQuery.Color(255, 51, 00, 255)}, 500);
        }, function () {
            $(this).animate({"backgroundColor": jQuery.Color(255, 255, 255, 255)}, 500);
        });
    });
</script>

导入所有引用的库

视频： https://youtu.be/2NnDj_TGUNA

Answer 1

仅使用 CSS：

.navLI{
  -webkit-transition: 0.3s;
          transition: 0.3s;
  background: rgba(255, 51, 255, 0.5);
}
.navLI:hover{
  background: rgba(255, 255, 51, 1);
}

关于你的jQuery问题，你忘了使用.stop()

 $(this).stop().animate({"backgroundColor": jQuery.Color(255, 51, 0, 1)}, 500);