javascript - How to change the background image "on click" with jQuery? -

i'm trying make animation effect background, should listen event change images on click. instance, click sajo hapyo should change background image. main issue images having different background-images , i'm stuck this.

i used backgroundcolor: green in js test, since wanted check, whether works or not.

at final version, background images added , should change on click nice jquery ui (effect).

here screenshot

please me out

here code

html

<section id="main-showcase">     <div class="showcase-wrapper">         <div class="left-main col-lg-3 col-md-3">             <div class="shadow-effect"><p class="ottogi">ottogi</p></div>             <div class="shadow-effect"><p class="sajo">sajo hapyo</p></div>             <div class="shadow-effect"><p class="natura">natura bogata</p></div>             <div class="shadow-effect"><p class="maloo">ТОО Малу</p></div>             <div class="shadow-effect"><p class="dongush">dongsuh</p></div>             <div class="shadow-effect"><p class="may">ООО Май</p></div>         </div>         <div class="right-main col-lg-9 col-md-9">             <div class="inner-container">                 <h1>ottogi</h1>                 <h2>Южно - Корейские продукты питания высочайшего качества!</h2>             </div>             <div class="box-container">                 <div class="main-wrap">                     <div id="main-slider" class="first-slider">                         [[getimagelist?                             &tvname=`goods`                             &tpl=`goodsslider.tpl`                         ]]                     </div>                 </div>             </div>         </div>     </div> </section> 

js

    $('button.sajo').click(function () {     $('.right-main').animate({         backgroundcolor: 'green',     }, 1500); }); 

actually instead of using jquery.animate(). can toggle class on same element. practice avoid animate() , using css3 animations instead.

codepen

check codepen sample here. explain how use it. instead of using keyframes , all. can obtain using trnasition.

span {   background-color: red;   padding: 10px;   transition: 1.5s ease;   color: white; } .change-color {   background-color: blue; }