h1 fade effect using Jquery

Question

I've googled various examples but I cant seem to get the desired effect to work On my home page I have a h1 heading.

I'm trying to create a fade effect with JQuery . When the page loads, I would like the h1 heading to fade in slowly (maybe even go from a small font to large)

Can anyone help with the code. Apologies, I've just stated out?

Many thanks, P

score 3 · Answer 1 · answered Dec 14 '14 at 19:08

3

Look at this jsfiddle I think it's a lot smoother if you fadein and chenge the font size at the same time.

Also , see the 1000 at the bottom part of the code? That's the animation time, you can change that for faster or slower performance.

$(document).ready(function(){
    $("h1").animate({ 
        'font-size' : '40px',
        'opacity': '1'
    },1000);
});

answered Dec 14 '14 at 19:08

Alin

1,218
5
21
47

Additionally & optionally, you may add a 2nd parameter (number) to .animate(), which would specify the duration/speed of animation in milliseconds $("h1").animate({ 'font-size' : '40px', 'opacity': '1' },10000); – Playmaker Dec 14 '14 at 19:13
@playmaker Well, I already have set the duration/speed of the animation...I even explained that : "Also , see the 1000 at the bottom part of the code? That's the animation time, you can change that for faster or slower performance." – Alin Dec 14 '14 at 19:18
Oh, my bad. Missed seeing it. – Playmaker Dec 14 '14 at 19:21
@playmaker it's ok :D – Alin Dec 14 '14 at 19:31

score 2 · Answer 2 · answered Jan 24 '18 at 20:09

jQuery.fadein() animation can be choppy sometimes while the dom loads (or if you are downloading/rendering a data payload.) Might have gotten better over the years but hey... here is the $-free solution:

h1 {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}
@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

A.B · Answer 3 · 2014-12-14T19:21:37.900

0

See output below or fiddle

  $(document).ready(function(){
    $("h1").fadeIn("slow").animate({ fontSize : '40px' });
    
    })

      h1{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello</h1>

edited Dec 14 '14 at 19:21

answered Dec 14 '14 at 19:01

A.B

20,110
3
37
71

Hey, your code is good but I think you didn't check the snippet, it's not running :) – Alin Dec 14 '14 at 19:13
Not working for me as well. Double ';' in first bit would be the issue I assume. – Playmaker Dec 14 '14 at 19:15
Yes, I am clicking the button but it's not working :)) and it should cause your code is right – Alin Dec 14 '14 at 19:15
strane @Alin and playmaker for making me know i was just doing it on many posts, may be it wont be working there as well. as it is working fine here strange – A.B Dec 14 '14 at 19:17
getting this error in console: "Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Sandbox access violation: Blocked a frame at "http://stacksnippets.net" from accessing a frame at "null". Both frames are sandboxed and lack the "allow-same-origin" flag." – Playmaker Dec 14 '14 at 19:18
it may be other error, thats really a problem for me. – A.B Dec 14 '14 at 19:20
Code works in jsfiddle though: http://jsfiddle.net/wxgce21r/ - add that instead of snippet.. – Playmaker Dec 14 '14 at 19:20
Welcome :) - really strange issue though. – Playmaker Dec 14 '14 at 19:22
how can i report this? can you please check my answer here works or not ? "http://stackoverflow.com/questions/27463232/next-and-previous-in-jquery-array/27463298#27463298" – A.B Dec 14 '14 at 19:23
@A.B I've checked it over there and it's working..it's a really strange bug. – Alin Dec 14 '14 at 19:49

score 0 · Answer 4 · edited May 23 '17 at 11:57

Theoretically, you'd want <h1> shown by default, in case the end user doesn't have Javascript installed, but hidden by Javascript which is called between your <head></head> tags, so that it's hidden before the page loads. Put the rest of the Javascript right before your </body> tag, so it loads lastly.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="doFirst.js"></script>
  </head>
  <body>
    <h1 class='title'>My Title</h1>
    <!-- page content -->
    <script src="doLast.js"></script>
  </body>
</html>

doFirst.js

$(document).ready(function(){
  $("h1.title").hide();
});

Use the hide() function to hide the element.

doLast.js

$(document).ready(function(){
  $("h1.title").fadeIn(3000);
});

Use the fadeIn() function to control the fade. The number represents the fade speed in milliseconds.

See a live example on JSFiddle.

Update

You can also do this with CSS3.

See how to fade in CSS.

See how to grow font in CSS.

h1 fade effect using Jquery

4 Answers4

index.html

doFirst.js

doLast.js

Update