How to change background image on click with animation using jquery and css

Question

How to change the background image of a block I have four buttons- pressing one button should change the background image with animation like (Fadein or fadeout). I have used this code its changing the background but how to add 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')");
     }
 });
});

score 0 · Accepted Answer · answered Oct 05 '19 at 16:59

You can do this with the transition style rule, for example: 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>

How to change background image on click with animation using jquery and css

1 Answers1