Reputation: 51

How to get text to fade in jQuery?

I have been trying for a day to get the text in my header to fade in using jQuery. I have search any topic I could find on the subject but nothing has worked yet. So I am posting here hoping to find some help. I will post some my code.

index.html: I'm trying to fade in the "Indie-GO!" text. line 12.

    <!DOCTYPE html>
<html>
    <head>        
        <link rel= "stylesheet" href= "BoxModel3.css">
        <title>Indie-GO! Home</title>
        <script type="text/javascript" src="fadeIn.js"></script>        
    </head>

    <body>
        <div id="wrapper">
            <header>Home
                <div id="fade">
                <h1 style="text-indent: 7em; font-family: Ravie; color: khaki;"> Indie-GO!</h1>
                </div>
                <div class="img">
                    <img src="118_832586-W.jpg"/>
                </div>
            </header>

            <nav>                
                <a href="index.html">Home</a>
                <a href="Artist_Home.html">Artist Home</a>
                <a href="Forum.html">Forum</a>
                <a href="Hip_Hop.html">Hip-Hop</a>            
                <a href="Rock_N_Roll.html">Rock-n-Roll</a>
                <a href="feedback.html">Feedback</a>
            </nav>

            <section>
                <h1>For Artist By An Artist!!!</h1>

                <div class="info1"> 
                    <h3 class="h3">
                        <p>Indie-GO! is your home for independent music. Upload your music/videos and be heard, or listen to today's up-and-comers. This is the one-stop-shop for all things INDEPENDENT!!!</p>
                    </h3> 
                </div>
            </section>
        </div>

            <footer>
                <p> <em>Indie-GO! &copy; 2015</em></p>  
            </footer>       
    </body>
</html>

CSS snippet

    #fade
{
    position: relative;

}

header
{
    border: 17px solid indigo; 
    font-family: Arial Black;
    font-size: 25px;
    padding 50px;
    background-color: indigo;
    text-shadow: 5px 4px 3px darkgrey;
    color: beige
}

fadeIn.js

$(document).ready(function () {
        $("#fade").fadeIn(2000);
    });

Any help would be appreciated. I can't figure out why this don't work, or what I am missing.

Upvotes: 0

Answers (8)

KinG Swisser

Reputation: 51

Ok I found a solution, for some reason my external .js file wasn't working. When I added the <div id="fade"> it would cut off the top half of my <header></header> and the text would completely disappear. So didn't link my external only the jQuery library, and I had to put the function in the HTML document also to get the effect I wanted. I really appreciate everyone's quick response. I wish I could give everyone a green checkmark. I was growing more grays on this one.

Upvotes: 0

reachtokish

Reputation: 356

you can use this jquery script

$(document).ready(function () {
    $("#fade").hide().fadeIn(2000);
});

Rather than

$(document).ready(function () {
    $("#fade").fadeIn(2000);
});

Upvotes: 1

Zakaria Acharki

Reputation: 67505

Your code look fine, just make sure that you include the Jquery library because fadeIn() is a jquery function and i can't find in your code where you call it, e.g :

<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
</head>

Hope this helps.

Upvotes: 1

code.rider

Reputation: 1897

fadeIn()

should display any invisible/hidden element. so you have to hide you element from display first so yes you have to use

#fade {
  display: none;
}

Upvotes: 1

Aaron

Reputation: 10430

you need to add display: none; to the #fade div. (& include jQuery!)

$(document).ready(function() {
  $("#fade").fadeIn(1000);
});

#fade {display: none;}

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

<div id="fade">
  <h1 style="text-indent: 7em; font-family: Ravie; color: khaki;"> Indie-GO!</h1>
</div>

Upvotes: 2

Prajwal Shrestha

Reputation: 553

You can try this

 $( "#clickme" ).click(function() {
   $( "#book" ).fadeIn( "slow", function() {
   // Animation call back
   });
 });

Upvotes: 1

Insane Skull

Reputation: 9358

You need to add:

#fade
{
  display: none;
}

$(document).ready(function () {
    $("#fade").hide().fadeIn(2000);
});

See working fiddle.

Upvotes: 1

Praveen Kumar Purushothaman

Reputation: 167172

Try this:

$(document).ready(function () {
    $("#fade").hide().fadeIn(2000);
});

Upvotes: 1

How to get text to fade in jQuery?

Answers (8)

Related Questions