Nureke Duisekeyev Nureke Duisekeyev - 3 years ago 87
Javascript Question

How to make dynamic transition effect with Jquery?

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

Ottogi

Sajo hapyo

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download