How to change the background image “on click” with jQuery?

Question

I'm trying to make animation effect for background, it should listen an event that will change images on click. For instance, I click Sajo Hapyo it should change the background image. Main issue is that all images will be having different background-images and I'm really stuck with this.

I used backgroundColor: green in my JS for test, since wanted to check, whether it works or not.

At the final version, the background images will be added and it should change on click with nice jquery UI (effect).

Here is screenshot

Please help me out

Here is my code

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

First of all, I cannot see in the HTML the button where you apply the click event listener. However, I assume this button is located somewhere in your HTML code and what you want to do is change the background image on the main slider by clicking on it. To do so you simply have to do the following:

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

Note that since you do not specify the exact animation you want, I just provided an example with a fade in animation where opacity goes from 0 to 1. You can change this animation to a different one by changing the content of .animate() and leaving the .css() like i wrote there. Hope this helps!

Answer 2

Actually instead of using the jQuery.animate(). You can simply toggle a class on the same element. It is a good practice to avoid animate() and using css3 animations instead.

codepen

Check the codepen sample here. It will explain how to use it. Instead of using keyframes and all. You can simply obtain it using 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;}
}`

Then add this class to the element you want to change the background of:

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

Answer 4

You can use like that

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