javascript - How to make dynamic transition effect with Jquery? -

i'm trying make transition effect when click on left side of sidebar.

for instance if click ottogi (ramen noodle's name) should change background image, , if you'd know sajo hapyo (ramen noodle's name), should change background-image. images in sidebar (eg. natura, maloo, dongush, may).

my program changes background-image works, stops whenever user wants click ottogi, it's stopped. so, i'm guessing should either use conditional statements or loops because doing same thing. please me that, i'm struggling hard.

this website i'm working http://test1.testkz.ru/

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> 

css

.ottogi-bg {     background: url('/assets/template/images/main_03.jpg') no-repeat center;     opacity: 1;     animation-name: fadeinopacity;     animation-iteration-count: 1;     animation-timing-function: ease-in;     animation-duration: 1s; } @keyframes fadeinopacity {     0% {         opacity: 0;     }     100% {         opacity: 1;     } } .sajo-bg {     background: url('../images/about-us-company-bg.jpg');     opacity: 1;     animation-name: fadeinopacity;     animation-iteration-count: 1;     animation-timing-function: ease-in;     animation-duration: 1s; } @keyframes fadeinopacity {     0% {         opacity: 0;     }     100% {         opacity: 1;     } } 

js

 $('p.ottogi').click(function(){     $('.right-main').addclass('ottogi-bg'); }); $('p.sajo').click(function(){     $('.right-main').addclass('sajo-bg'); }); 

the reason keep adding class .right-main class. means end with: .right-main .ottogi-bg .sajo-bg. because sajo-bg last class defined in css overule ottori-bg class.

you try this:

$('.ottogi').click(function(){      $('.right-main').removeclass().addclass("right-main ottogi-bg");      });  $('.sajo').click(function(){          $('.right-main').removeclass().addclass("right-main sajo-bg");      });

.right-main{    background-color:grey;    padding:20px;  }  .ottogi-bg{    background-color:blue;  }  .sajo-bg{    background-color:red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <a href="#" class="ottogi">ottogi</a><br/>  <a href="#" class="sajo">sajo</a><br/>  <div class="right-main">    test  </div>

with make sure previous class deleted , can add desired class.