[RESOLVED]JQuery – Fade in all <h1> elements

Hi,

I was wondering if someone could help me.  I would like all my H1 elements to fade in on a page after 2 seconds.  However, nothing is happening.  Can someone point to me in my code attached where I am going wrong:

 <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('h1').fadeIn(2000);
    });
    </script>

I have inputted this into my asp.net master page.  

Any help would be greatly appreciated.

Rob

Robbied81

Hi,
I was wondering if someone could help me.  I would like all my H1 elements to fade in on a page after 2 seconds.  However, nothing is happening.  Can someone point to me in my code attached where I am going wrong:
 <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('h1').fadeIn(2000);
    });
    </script>

This is function declaration. Where are you calling it?

You code is working fine in my sample demo

Most likely the issue will be jquery files not refrenced properly.You might want to consider using the ResolveUrl() method to
resolve the appropriate URLs for your references like given below

<!-- Using the ResolveUrl Method to properly map the appropriate URL -->
<script src="<%= ResolveUrl("~/Scripts/jquery-1.4.1.js") %>" type="text/javascript"></script>

You also need to ensure to hide the H1 tags on page load and then made visisble using the fadin property in Jquery

<h1 style="display:none">Test</h1>

Complete Code:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  
  <script type="text/javascript">
    $(document).ready(function () {
        $('h1').fadeIn(2000);
    });
  </script>
</head>
<body>
  <h1 style="display:none">Test</h1>
</body>
</html>

Also I noticed that you are using an older version of Jquery .Please follow the below steps to download latest version Jquery files and add it to your solution

You can download the latest Jquery files from Jquery download section or from online Jquery Hosted
sites
 and use it in your project. Personally I also prefer to do that as we have a dependency on network (internet) whenever we use the online hosted libraries.

To add JQuery files to your project you need to manually add  the Jquery Js files to your solution

First add a scripts folder to your project, so that you can keep all your script files in

  • Open your Project within the Solution Explorer
  • Right-click the Main WebProject and Choose Add option
  • You will be able to see new side window opened from that select the New Folder option
  • Rename the folder name to “Scripts” to add it to your project. 

Now you have a folder where you can keep all your Js scripts files. 

  • Right-click the Scripts folder and Choose Add Existing Item option
  • Next step is to add the jquery files to your project
  • Find and select the jquery-1.10.2.js library  by browsing to its downloaded folder location)
  • Click the Ok button to add it to your Project.

Hi

It should load automatically on Page Load event.

Thanks

Rob

Hi,

I tried all of the above and that did not work either.  I can see it is referencing the JQuery file correctly.  

Thanks

Rob

Hi – I’m not 100% sure whether you want it to fade in after 2 seconds or fade in immediately but the fade animation takes 2 seconds..

Either way – you need to set the display of the h1 to none (or the opacity to 0 which might be better) in order to fade it in. If it’s already visible, you can’t fade it in.

So – your code would look something like this:

<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>

<style>
h1{display:none;}
</style>

<script type="text/javascript" >

$(function(){

setTimeout(function(){

$("h1").fadeIn(2000);

},2000);

})

</script>

In this case I gave you a 2 second animation AND a 2 second delay before it kicks in.

Like I say – you’re probably better off using opacity:0 rather than display:none…

This will work for you.

Robbied81

It should load automatically on Page Load event.

Yes it will load automatically at pageload event. To create an effect of fadein you need to first hide all the divs and then show it using the Jquery codes.You can check this in the sample demo I provided

A2H

Yes it will load automatically at pageload event. To create an effect of fadein you need to first hide all the divs and then show it using the Jquery codes.You can check this in the sample demo I provided

If you set display to none, there will be no "space" allocated for the h1 so any content below it will jump down the page when the jquery animatess in. Using opacity:0 will mean the H1 still has allocated space for it on the page even when you can’t see
it.

loydall123

A2H

Yes it will load automatically at pageload event. To create an effect of fadein you need to first hide all the divs and then show it using the Jquery codes.You can check this in the sample demo I provided

If you set display to none, there will be no "space" allocated for the h1 so any content below it will jump down the page when the jquery animatess in. Using opacity:0 will mean the H1 still has allocated space for it on the page even when you can’t see
it.

Good Point loydall123 , but IMHO it looks little odd if you have more H1 tags and when page initially loads there will be white spaces in screen. Well this is purely my opinionSmile

Agree re. more than 1 H1 tag. Typically a page would only have 1 h1 tag but with HTML5 you can use more (from an SEO point of view).

Robbied81

<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>

if you insert this code in master page-> wrong when come child page

pls change

<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery-1.4.1.js") %>"></script>

or get CND jquery 

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

Hi Robbied,

Thanks for your post.

Robbied81

I would like all my H1 elements to fade in on a page after 2 seconds.

As for your problem, you could refer to the below sample.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function () {
            $("h1").hide();
            setTimeout(function () {
                alert("hello");
                $("h1").fadeIn();
            }, 2000);
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>H1.1</h1>
            <h1>H1.2</h1>
            <h1>H1.3</h1>
            <h1>H1.4</h1>
        </div>
    </form>
</body>
</html> 

If you have any question about this solution, please post back.

Best Regards,

Fei Han

Leave a Reply