Post Reply 

JQuery Fade In/Out

May 9, 2011, 15:33 (This post was last modified: May 9, 2011 15:33 by mikethedj4.)
Post: #1
JQuery Fade In/Out
Click here to see the demo.

Click here: to watch the video tutorial.

In this tutorial I'm going to show you guys how to make a div fade in, or out.

So first thing's first here's our CSS.
Code:
body {
    background:#3d3d3d;}

div.box1fadin {
    position:absolute;
    top:0px;
    left:0px;
    width:300px;
    height:300px;
    background:#5a5a5a;
    box-shadow:4px 4px 8px #1c1c1c;
    -webkit-box-shadow:4px 4px 8px #1c1c1c;
    -moz-box-shadow:4px 4px 8px #1c1c1c;
    -o-box-shadow:4px 4px 8px #1c1c1c;}
    
div.box2fadout {
    position:absolute;
    top:0px;
    right:0px;
    width:300px;
    height:300px;
    background:#5a5a5a;
    box-shadow:-4px 4px 8px #1c1c1c;
    -webkit-box-shadow:-4px 4px 8px #1c1c1c;
    -moz-box-shadow:-4px 4px 8px #1c1c1c;
    -o-box-shadow:-4px 4px 8px #1c1c1c;}

As you can see it's fairly basic, just 2 divs, with a light gray background color, and with a drop shadow. One div on the top left, and another on the top right. As you can see by the names the one on the top left will fade in, and the one on the top right will fade out.

So here's our HTML
Code:
<html>
<head>
<title>JQuery Fading DIVs</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
    <div class="box1fadin"></div>
    <div class="box2fadout"></div>
</body>
</html>

All we've done here is add in our JQuery, CSS, and the divs we want to fade in/out.

So here's our JQuery
Code:
$(document).ready(function() {
        $('.box1fadin').hide().fadeIn(3000);
        $('.box2fadout').fadeOut(3000);
    });

$('.box1fadin').hide().fadeIn(3000); states that the class .box1fadin will be hidden, and it'll fade in from 0% opacity to 100% opacity in 3 seconds.

$('.box2fadout').fadeOut(3000); states that the class .box2fadout will fadeout from 100% to 0% in 3 seconds.

and that's it, it's that simple!

Here's our final HTML.
Code:
<html>
<head>
<title>JQuery Fading DIVs</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.box1fadin').hide().fadeIn(3000);
        $('.box2fadout').fadeOut(3000);
    });
</script>
</head>
<body>
    <div class="box1fadin"></div>
    <div class="box2fadout"></div>
</body>
</html>


.zip  jqueryfading.zip (Size: 32.15 KB / Downloads: 209)

[Image: gimppimp_forum_sig_by_mikethedj4-d39msp7.png]
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  JQuery Hotkeys Tutorial mikethedj4 0 5,111 Jul 3, 2011 06:53
Last Post: mikethedj4
  JQuery Lightbox Effect mikethedj4 0 1,001 May 9, 2011 15:35
Last Post: mikethedj4
  Stylish Show/Hide Button in JQuery mikethedj4 0 1,858 Apr 19, 2011 22:14
Last Post: mikethedj4

Forum Jump:


GIMP ForumPortalArchiveContactTermsRSS