0
サイドバーの左側をクリックすると、トランジション効果を得ようとしています。例えばJqueryで動的なトランジションエフェクトを作成するには？
あなたはOttogi（ラーメンの名前）をクリックした場合には、背景画像を変更する必要があり、そしてあなたがについてSajo hapyo（ラーメンの名前）知りたいのならば、それはすべき背景画像も変更します。基本的にサイドバーのすべての画像（eg. natura、maloo、dongush、may）です。
バックグラウンドイメージを変更するプログラムは機能しますが、オットーをクリックしたいときはいつでも停止します。停止するだけです。だから、基本的に同じことをしているので、私は条件文やループを使うべきだと思っています。 私はそれを手伝ってください、私はとても苦労しています。
この
は私が働いているウェブサイトです 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');
});