The page fades in as soon as it is loaded thanks to the "

Question

The page fades in as soon as it is loaded thanks to the "

I am interested in creating a unique effect where different classes fade in on page load.

Check out this webpage for reference.

The linked page showcases squares in various shades of grey and color, with the desire to have them fade in at different intervals.

While there are articles available on fading in ID tags, I haven't found any specifically on fading in Class tags. Using IDs would require targeting each square individually as IDs can only affect one element.

I am aiming to apply effects to multiple squares simultaneously.

css class fadein onload

Answer 1

Answer №1

Consider using data attributes such as data-start-color="#CCCCCC", data-end-color, data-over-time="100", data-out-time.

You can create a single function that works for all squares. Here's an example (please note, I haven't tested this on your specific page):

$('.square').hover(
  function() {
    $(this).stop().animate({ backgroundColor: $(this).data('end-color') }, $(this).data('over-time'));
  },
  function() {
    $(this).stop().animate({ backgroundColor: $(this).data('start-color') }, $(this).data('out-time'));
  }
)

Answer 2

Consider using data attributes such as data-start-color="#CCCCCC", data-end-color, data-over-time="100", data-out-time.

You can create a single function that works for all squares. Here's an example (please note, I haven't tested this on your specific page):

$('.square').hover(
  function() {
    $(this).stop().animate({ backgroundColor: $(this).data('end-color') }, $(this).data('over-time'));
  },
  function() {
    $(this).stop().animate({ backgroundColor: $(this).data('start-color') }, $(this).data('out-time'));
  }
)

The page fades in as soon as it is loaded thanks to the "

Answer №1

Similar questions

Printing CSS in ASP.NET without a print dialog box or a pop-up confirmation message after successful printing

Place an element in relation to the vertical size of a div that includes written content

Can a website be designed to mimic the style of the current operating system?

Struggling to insert a high-quality image into inline divs of exactly 33.3333% width

Utilize a dual-color gradient effect on separate words within the <li> element

What is the best way to ensure the dropdown box in a Bootstrap navbar automatically adjusts its width to fit within the

Sections stacked with Bootstrap cards are located beneath a different section

What is the reason that a Button's text does not adhere to CSS style rules within the container that holds the button?

What is the best method to shift an element to the top by a fraction of its height, namely -100%?

Adjust the color of both the image and text when hovering over either one

JavaScript progress bar with extended duration, inspired by the success-oriented approach

Adding fewer components to your current Angular 5 project

Tips for creating a centered Reindeer

What is the process for creating two columns with an input box beneath them?

Ways to duplicate a letter in HTML?

Creating links within a single image in HTML?

What is the best way to adjust the Material Drawer width in Reactjs to match the width of its children?

Tips for avoiding overflow while utilizing animations

What is the best way to change the background color of a table cell in HTML and CSS?

Issue with Internet Explorer's CSS