如何使用jQuery“单击”更改背景图像？

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

首先，我无法在HTML中看到在其中应用单击事件侦听器的按钮。 但是，我假设此按钮位于HTML代码中的某个位置，并且您要执行的操作是通过单击它来更改主滑块上的背景图像。 为此，您只需执行以下操作：

$('button.sajo').click(function () {
    $('.right-main').animate({opacity: 0}, 'slow', function() {
        $(this)
        .css({'background-image': 'url(your_url)'}) //Change url to your image url
        .animate({opacity: 1});
    }
});

请注意，由于您没有指定所需的确切动画，因此我仅提供了一个不透明度从0变为1的淡入淡出动画的示例。您可以通过更改.animate()和像我在那儿一样留下.css() 。 希望这可以帮助！

Answer 2

实际上不是使用jQuery.animate（）。 您可以简单地在同一元素上切换类。 避免animate（）并改用css3动画是一个好习惯。

码笔

在此处检查代码笔示例。 它将解释如何使用它。 而不是使用关键帧等。 您可以简单地使用trnasition获得它。

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

Answer 3

.bgcolor{
  animation: colorchange 50s; /* animation-name followed by duration in seconds */
     /* you could also use milliseconds (ms) or something like 2.5s */
  -webkit-animation: colorchange 50s; /* Chrome and Safari */
}

@keyframes colorchange
{
  100%  {background: green;}
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
  100% {background: green;}
}`

然后将此类添加到要更改其背景的元素：

$('button.sajo').click(function () {
    $('.right-main').addClass('bgcolor');
});

Answer 4

你可以这样使用

 var imageUrl = your image url $('button.sajo').click(function () { $('.right-main').css('background-image', 'url(' + imageUrl + ')'); });