如何使用jquery和css更改点击动画的背景图像[重复]答案

【问题标题】：How to change background image on click with animation using jquery and css [duplicate]如何使用jquery和css更改点击动画的背景图像[重复]
【发布时间】：2020-02-03 14:51:54
【问题描述】：

如何更改块的背景图片我有四个按钮——按一个按钮应该用动画（淡入或淡出）改变背景图像。我已经使用此代码更改背景但如何添加动画。

jQuery(document).ready(function($){

$('#i1').on({
     'click': function(){
         $('#change-image').css("background-image", "url('../Zelos/img/e1.jpg')");
     }
 });

$('#i2').on({
     'click': function(){
         $('#change-image').css("background-image", "url('../Zelos/img/e2.jpg')");

     }
 });

$('#i3').on({
     'click': function(){
         $('#change-image').css("background-image", "url('../Zelos/img/e3.jpg')");
     }
 });

$('#i4').on({
     'click': function(){
         $('#change-image').css("background-image", "url('../Zelos/img/e4.jpg')");
     }
 });
});

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

您可以使用过渡样式规则执行此操作，例如：transition: all .6s ease-in

$('#i1').on({
  'click': function() {
    $('#change-image').css("background-image", "url(http://placekitten.com/1500/1500)");
  }
});

$('#i2').on({
  'click': function() {
    $('#change-image').css("background-image", "url(http://placekitten.com/1200/1200)");

  }
});

$('#i3').on({
  'click': function() {
    $('#change-image').css("background-image", "url(http://placekitten.com/1400/1400)");
  }
});

$('#i4').on({
  'click': function() {
    $('#change-image').css("background-image", "url(http://placekitten.com/1000/1000)");
  }
});

#change-image{
   background: url(http://placekitten.com/500/500) center/cover;
   height: 300px;
   width: 300px;
   transition: all .6s ease-in;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="i1">Click Me 1</button>
<button id="i2">Click Me 2</button>
<button id="i3">Click Me 3</button>
<button id="i4">Click Me 4</button>

<div id="change-image"></div>

【讨论】：