Question

我可以在JQuery中使用CSS来缓慢更改div的颜色吗？哦，还有一件事，我怎样才能在我的<div>中添加第二个功能。这是代码。我希望在mouseout发生时将颜色更改回旧颜色。

<script>
    function myFunction() {
        $(document).ready(function () {
            $("#square").css({ backgroundColor: 'blue' });

        });

    }
</script>

<div id="square" onmouseover="return myFunction()">Focus on me!</div>

Answer 1

为了减慢速度，请提供transition并删除document.ready，因为您正在通过非负载的内容调用它：

#square {transition: 1s all linear;}

跨浏览器支持

-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;

<强>段

$(document).ready(function () {
  $("#square").hover(function () {
    $(this).css("backgroundColor", 'blue');
  }, function () {
    $(this).css("backgroundColor", '');
  });
});

#square {width: 100px; height: 100px; transition: 1s all linear;}

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

Answer 2

注意： jQuery UI项目通过允许对颜色等非数字样式进行动画处理来扩展.animate（）方法。该项目还包括通过CSS类而不是单个属性指定动画的机制。

使用.animate：

<script>
    function myFunction() {
        $(document).ready(function () {
            $("#square").animate({
                backgroundColor: 'blue'
            }, 500);

        });

    }
</script>

在这种情况下，转换为500 ms。

Answer 3

您可以使用.animate()设置延迟的css效果：

$("#square").animate({backgroundColor: 'blue'}, 500});

Answer 4

将您的代码与此CSS规则相结合

#square {
   transition: 1s ease background;
}

在Jquery中改变颜色

4 个答案: