Home/ Questions/Q 8907531
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T02:56:25+00:00

I’m currently making my second website and I am using Jquery for the first

  • 0

I’m currently making my second website and I am using Jquery for the first time. I wanted to make a succession of 4 small squares on the side of my page fade in, in a sequenced order when you load the homepage.

I have managed to do this! It looks great but I don’t want the effect to happen each time the viewer clicks on a different page.

If anyone could tell me how to code this animation just so it fades in on my index page I would be extremely grateful.

my current code is listed below,

Many thanks!

$(document).ready(function(){

  $('.wrapper').fadeIn(1000);

  $("#BlockOne").fadeIn('slow');

  $("#BlockTwo").fadeIn(2500);

  $("#BlockThree").fadeIn(2500);

  $("#BlockFour").fadeIn('slow');

});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are a number of ways to resolve this.

    You could simply not output this javascript on pages other than the homepage. If you need the functionality to make hidden elements appear on the other pages, you could just do an alternate javascript that displays them immediately without the fadeIn.

    You could output one common function on all pages, but use a condition on the document location to determine whether to fade in or show immediately.

    You could save some value in a cookie, or HTMLS localStorage or session storage to act as a flag to determine whether to show with fade in or immediately.

    I personally prefer the latter as what happens is the user doesn’t arrive to your site via the homepage? I would think your intent would be to have the fade in effect on the first visited page, not necessarily the home page.

    • 0