javascript - 如何使用 jQuery 更改背景图片 "on click"？

Question

我正在尝试为背景制作动画效果，它应该监听一个在单击时更改图像的事件。例如，我单击 Sajo Hapyo 它应该更改背景图像。主要问题是所有图像都有不同的背景图像，我真的坚持这一点。

我在我的 JS 中使用了 backgroundColor: green 进行测试，因为想检查它是否有效。

在最终版本中，将添加背景图像，并且应该在单击时更改，并具有漂亮的 jquery UI(效果)。

这是屏幕截图

请帮帮我

这是我的代码

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>
</section>

JS

    $('button.sajo').click(function () {
    $('.right-main').animate({
        backgroundColor: 'green',
    }, 1500);
});

Answer 1

实际上不是使用 jQuery.animate()。您可以简单地在同一元素上切换一个类。避免使用 animate() 并使用 css3 动画代替是一个很好的做法。

codepen

在此处查看 codepen 示例。它将解释如何使用它。而不是使用关键帧之类的。您可以简单地使用 trnasition 获取它。

span {
  background-color: red;
  padding: 10px;
  transition: all 1.5s ease;
  color: white;
}
.change-color {
  background-color: blue;
}