Question

我正在尝试更改背景图片但不能正常工作：

简单的作品：

$('button').click(function(){
    $('#img').css({'background-image':'url("image-path.png")'});
});

working demo

但是这不起作用，好像它已经应用了css3动画：

#img{
    animation: changeImage 1s;
    animation-play-state: running;
    animation-fill-mode: forwards;
    -webkit-animation: changeImage 1s linear;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
}

problem demo

Answer 1

您需要了解CSS中动画和过渡之间的区别。

动画定义了一组随时间变化的属性，包括它们如何变化以及它们变为什么。

另一方面，转换仅定义属性如何更改。转换不会自行更改属性。

您在问题演示中所做的是定义一个动画，然后期望它的行为就像过渡一样。

如果您将动画 css放入其自己的类中，则可以将该类应用于图像并观察动画的发生：

<强> CSS

#img.change{
  animation: changeImage 1s;
  animation-play-state: running;
  animation-fill-mode: forwards;
  -webkit-animation: changeImage 1s linear;
  -webkit-animation-play-state: running;
  -webkit-animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
}

<强>的JavaScript

$('button').click(function(){
    $('#img').addClass('change');
});

Fiddle

或者，您可以在图像的背景上定义过渡，然后像以前一样更新图像，背景应该淡出：

<强> CSS ：

#img{
    background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR6CRSAoE8I7AUbRwKXScakaTFWO0t_TvPPmW1aXyNTGeErtLuT4w');
    width: 250px;
    height: 150px;
    transition: background 1s ease-in-out
}

您的JavaScript仍然可以使用。

Fiddle

动画后如何更改背景图片？

1 个答案: