Question

我正在设计一个网页，我想建立一个“联系我们”页面。我想将.emailSelectorContainer的背景动画为另一种颜色。但它似乎没有用。这是代码;

$(".emailSelectionContainer").hover(function(){

        $(".mailImage").attr("src", "photos/mailHover.png");

        $(".emailSelectorContainer").animate({'backgroundColor': '#f5f5f5'},400);

    }, function(){

        $(".mailImage").attr("src", "photos/mail.svg");
        $(".emailSelectorContainer").animate({'backgroundColor': '#000'},400);

    });

提前致谢。

Answer 1

我只是在css中使用@keyframes来解决平滑过渡。

Answer 2

根据jQuery文档

除非如下所述，否则所有动画属性都应设置为单个数值。大多数非数字属性无法使用基本jQuery功能进行动画处理（例如，宽度，高度或左边可以设置动画，但背景颜色不能，除非使用jQuery.Color插件）。除非另有说明，否则属性值被视为多个像素。可以在适用的情况下指定单位em和％。

background-color接受颜色（字符串），rgb（）值，rgba（）值或十六进制值的名称。它不是数字。

我建议将CSS3 animations与关键帧一起使用。这是一个例子

＆＃13;

#my-div {
  background-color: #000;
  height: 100px;
  width: 100px;
}

#my-div:hover {
  animation-name: changeColor;
  animation-duration: 0.4s;
}

@keyframes changeColor {
  from { background-color: #000; }
  to { background-color: #f5f5f5; }
}

＆＃13;

<div id="my-div"></div>

＆＃13;

使用@keyframes语法创建新动画。在动画块内部为动画的每个步骤声明属性。

开始步骤：由from或0%
结束步骤：由to或100%

对于每个步骤，我们可以声明由分号分隔的多个css规则。

现在我们已经创建了动画规则，我们需要应用它。使用:hover伪选择器监听鼠标何时进入元素。

此处设置两个属性。 animation-name属性应设置为我们刚刚创建的规则的名称。 animation-duration属性指定动画的运行时间，在这种情况下需要0.4秒。

或者，可以将它们转换为简写动画属性。

animation: changeColor 0.4s

背景颜色不在鼠标悬停上动画

2 个答案: