如何使用 jquery 和 css 通过 animation 单击更改背景图像 [重复]

Question

这个问题在这里已经有了答案：

• CSS3 背景图像过渡11 个答案

如何更改块的背景图像我有四个按钮 - 按一个按钮应该使用 animation 更改背景图像（淡入或淡出）。 我已使用此代码更改背景，但如何添加 animation。

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')");
     }
 });
});

Answer 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>