Question

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

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

在最终版本中，将添加背景图像，并且应该在点击时使用漂亮的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中看到应用click事件监听器的按钮。但是，我假设此按钮位于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.您可以通过更改{{{{{{{{ 1}}然后就像我在那里写的一样.animate()。希望这有帮助！

Answer 2

实际上不是使用jQuery.animate（）。您只需在同一元素上切换一个类即可。避免使用animate（）和使用css3动画是一种很好的做法。

codepen

在此处查看codepen示例。它将解释如何使用它。而不是使用关键帧和所有。您只需使用trnasition即可获得它。

activemq-protobuf

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 + ')');
});

如何使用jQuery“点击”更改背景图片？

4 个答案: