Question

我想制作一个框，它会在悬停在其上后用动画改变背景颜色，但我的jQuery脚本对div没有任何影响。但是没有错误。

＆＃13;

css/theme.min.css

＆＃13;

$(document).ready(function(){
    $("#box").hover(function () {
    $(this).stop().animate({ backgroundColor: "#F00" },700)
    }, function() {
    $(this).stop().animate({ backgroundColor: "#AAA" },700)}   
);
});

＆＃13;

Answer 1

Background-color不是可以使用jQuery进行动画处理的属性。相反，您可以使用CSS：hover pseudoelement，也可以在没有动画的情况下更改背景颜色。

CSS

#box {
    background-color: red;
}
#box:hover {
    background-color: #F00;
}

的jQuery

$(this).css({'background-color' : 'red'});

Answer 2

您可以使用Color animation jQuery-plugin为背景颜色设置动画。这很简单，这是一个完整的示例：

  <head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#box").hover(function () {
                $('#box').animate({ backgroundColor: 'black' })
            }, function () {
                $('#box').animate({ backgroundColor: 'red' })
            }
        );
        });
    </script>
</head>
<body>
    <div id="box" style="display: block; width: 500px; height: 100px; margin: 0 auto; background-color: red;"></div>
</body>

Answer 3

您无需为此效果编写JavaScript或Jquery。你可以使用CSS3。代码如下： -

<!-- HTML-->
<div class="box"></div>

/* CSS */

.box {
  width: 150px;
  height: 150px;
  background: red;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
  }

  .box:hover {
  background-color: green;
  cursor: pointer;
  }

检查JSFiddle

Answer 4

你应该为backgroundColor动画导入更多的jquery函数。 this link对您非常有帮助。

属性悬停在JQuery中

4 个答案: