How can I combine addClass with fadeIn/fadeOut in JavaScript?

Question

How can I combine addClass with fadeIn/fadeOut in JavaScript?

Can the addClass and fadeIn functions be combined in JS?

Although I'm not very experienced with JS, I'm working on a script where the div container changes background color by fading in and out on text hover.

I've created a CodePen to demonstrate what I'm trying to achieve. Currently, when you hover over a title, the background appears abruptly without any transition effect.

Check out the example here

$(document).ready(function () {
    $('#1st').hover(function () {
        $('#BG').addClass('first');
        $('#BG').removeClass('second');
    });
    $('#2nd').hover(function () {
        $('#BG').addClass('second');
        $('#BG').removeClass('first');
    });
});

section{
  min-height: 500px;
  text-align: center;
}

.title{
  margin: 50px auto;
  font-size: 5em;
  font-weight: 400;
}

.first {
    background: url(https://cdn.pixabay.com/photo/2022/11/03/15/24/coffee-7567749_960_720.jpg);
    background-size: cover;
}

.second {
    background-image: url(https://cdn.pixabay.com/photo/2022/10/25/13/28/hanoi-7545860_960_720.jpg);
    background-size: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section id="BG">
  <div id="1st" class="title">TITLE</div>
  <div id="2nd" class="title">TITLE 2</div>
</section>

Is it possible to fade in the current item being hovered over and fade out the other one using fadeIn? Any suggestions would be greatly appreciated :-) Thanks!

javascript jquery css animation

Answer 1

Answer №1

If you want to add a second layer around your #BG with different background images, you can do the following:

<div id="container">
  <div id="BG">
    <h2 id="1st">First</h2>
    <h2 id="2nd">Second</h2>
  </div>
</div>

#container {
  background-image: url(https://example.com/first-background.jpg);
}

#BG {
  background-image: url(https://example.com/second-background.jpg);
}

You can then animate the opacity of #BG on hover using jQuery:

$('#1st').hover(function () {
    $('#BG').animate({opacity: 0}, 1000);
});
$('#2nd').hover(function () {
    $('#BG').animate({opacity: 1}, 1000);
});

To avoid the content (#1st and #2nd) from fading away, wrap it in an additional div with position absolute:

<div id="container">
  <div id="BG"></div>
  
  <div id="content">
    <h2 id="1st">First</h2>
    <h2 id="2nd">Second</h2>
  </div>
</div>

#content {
  position: absolute;
  top: 0;
}

Check out the working example below:

$('#1st').hover(function () {
    $('#BG').animate({opacity: 0}, 1000);
});
$('#2nd').hover(function () {
    $('#BG').animate({opacity: 1}, 1000);
});

#container {
  background-image: url(https://example.com/first-background.jpg);
}

#BG {
  height: 100px;
  background-image: url(https://example.com/second-background.jpg);
}

#content {
  position: absolute;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div id="BG"></div>
  
  <div id="content">
    <h2 id="1st">First</h2>
    <h2 id="2nd">Second</h2>
  </div>
</div>

Answer 2

If you want to add a second layer around your #BG with different background images, you can do the following:

<div id="container">
  <div id="BG">
    <h2 id="1st">First</h2>
    <h2 id="2nd">Second</h2>
  </div>
</div>

#container {
  background-image: url(https://example.com/first-background.jpg);
}

#BG {
  background-image: url(https://example.com/second-background.jpg);
}

You can then animate the opacity of #BG on hover using jQuery:

$('#1st').hover(function () {
    $('#BG').animate({opacity: 0}, 1000);
});
$('#2nd').hover(function () {
    $('#BG').animate({opacity: 1}, 1000);
});

To avoid the content (#1st and #2nd) from fading away, wrap it in an additional div with position absolute:

<div id="container">
  <div id="BG"></div>
  
  <div id="content">
    <h2 id="1st">First</h2>
    <h2 id="2nd">Second</h2>
  </div>
</div>

#content {
  position: absolute;
  top: 0;
}

Check out the working example below:

$('#1st').hover(function () {
    $('#BG').animate({opacity: 0}, 1000);
});
$('#2nd').hover(function () {
    $('#BG').animate({opacity: 1}, 1000);
});

#container {
  background-image: url(https://example.com/first-background.jpg);
}

#BG {
  height: 100px;
  background-image: url(https://example.com/second-background.jpg);
}

#content {
  position: absolute;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div id="BG"></div>
  
  <div id="content">
    <h2 id="1st">First</h2>
    <h2 id="2nd">Second</h2>
  </div>
</div>

How can I combine addClass with fadeIn/fadeOut in JavaScript?

Answer №1

Similar questions

Leveraging a standalone Vue project as a node package within another project

Guide to integrating search and clear icons into the bootstrap search bar

The database threw an error: "Duplicate key found in collection causing MongoError: E11000"

Ask the controller for information, then send it to the appropriate route before displaying it in

The communication between Node.js Express and the front end is experiencing synchronization issues

Endless repetition occurs when invoking a function within a v-for loop

Transforming a CSV file into JSON format using Gatsbyjs

CSS implementation of a treeview with a dropdown submenu

Is it possible to retrieve a value within nested objects using only a single string as the reference?

When the collapsed navbar is displayed, elements are pushed beyond the boundaries of their parent container (Bootstrap 5)

Submitting a form and using Ajax to upload an image

Unable to add a logo to the header in react-material kit

Start up a server using Angular along with Node.js and Express framework

Can you navigate between slides with JQuery?

Using JavaScript's setInterval function in conjunction with Math.random to obtain a random value

Error: The function seems to be malfunctioning or missing

Setting up a autoRotate toggle feature in three.js using dat.gui - a step-by-step guide

Bring in 2 Angular applications into a different JavaScript project

Is it problematic to incorporate jQuery into Angular applications?

In bootstrap, two overlapping DIVs are displayed below each other in mobile mode