javascript - 如何用Jquery制作动态过渡效果？

Question

我正在尝试在您单击侧边栏左侧时制作过渡效果。

例如，如果您点击 Ottogi(拉面的名称)，它应该更改背景图像，如果您想了解 Sajo hapyo(拉面的名称) )，它还应该更改背景图像。基本上适用于侧边栏中的所有图像(例如 natura、maloo、dongush、may)。

我的更改背景图像的程序可以工作，但是每当用户想要单击返回 ottogi 时它就会停止，它就停止了。所以，我猜我应该使用条件语句或循环，因为它基本上做同样的事情。请帮助我，我很努力。

这是我正在工作的网站 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

原因是您不断将类添加到 .right-main 类中。这意味着您最终会得到:.right-main .ottogi-bg .sajo-bg。因为 sajo-bg 是您在 CSS 中定义的最后一个类，所以它将始终优先于 ottori-bg 类。

你可以试试这个:

$('.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>

通过此操作，您可以确保删除先前的类(class)，然后您可以添加所需的类(class)。