How to make dynamic transition effect with Jquery?

Question

I'm trying to make transition effect when you click on the left side of the sidebar.

For instance if you click Ottogi (ramen noodle's name) it should change the background image, and if you'd like to know about Sajo hapyo (ramen noodle's name), it should also change the background-image. Basically for all images in the sidebar (eg. natura, maloo, dongush, may).

My program that changes the background-image works, however it stops whenever user wants to click back ottogi, it's just stopped. So, I'm guessing I should either use conditional statements or loops because it basically doing the same thing. Please help me with that, I'm struggling so hard.

This is the website that 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');
});

Answer 1

The reason is that you keep adding the class to the .right-main class. Which means that you end up with: .right-main .ottogi-bg .sajo-bg. Because sajo-bg is the last class you defined in your CSS it will always overule the ottori-bg class.

You could 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 this you make sure that previous class is deleted and you then you can add the desired class.

Answer 2

I think problem is JavaScript code.

If user click ottogi, then click sajo.

1. .right-main div is added ottogi-bg class
2. .right-main div is added sajo-bg class

after two click, .right-main has two class. Maybe client side is confused.

this solution is like that...

set below code

$('.right-main').removeClass('sajo-bj');

after

$('.right-main').addClass('ottogi-bg');