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

Arranging rows within the Zurb Foundation grid structure

Press the div, excluding the button - Vue

The thickness of an SVG line increases as it is rotated

Simultaneously scrolling left and fading in with jQuery

Verify whether the content within the Div has been modified

How can I style the inner HTML text of an element without altering the style of its subelements? (CSS Selector)

Why is the radio button getting bound to the error instead of the label?

Are Your Padding Styles Missing?

I am having trouble grasping the concept of CSS and the first-child selector

Ways to prevent blank class from occupying space until filled with Javascript

How can I activate a disabled option number 2 after selecting option number 1?

Using jQuery to create a div that animates when scrolling

Is there an issue with loading CSS and JavaScript in mobile view on a website built with CodeIgniter?

Issues with CSS rendering have been encountered on the Facebook page

Combining selected boxes through merging

Issue with the formatting of the disabled button

Inline CSS alignment

The ultimate guide to personalizing group titles in Angular UI-Select

Apply the active class to only one element at a time

Setting up a responsive footer using Bootstrap and responsive design involves following a few key steps