1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

JQuery Fade In/Out

Discussion in 'Gimp Tips & Tutorials' started by mikethedj4, May 4, 2011.

  1. mikethedj4

    mikethedj4 Member

    Joined:
    Nov 13, 2010
    Messages:
    594
    Likes Received:
    1
    Trophy Points:
    16
    Gender:
    Male
    Occupation:
    Web UI/UX Designer, Enginner, and Personal Trainer
    Location:
    Rockford, IL
    Home Page:
    Click here to see the demo.
    Old link removed due to spam @KiT

    [youtube]lYUOUAWyRXU[/youtube]

    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>
     

    Attached Files:

    Last edited by a moderator: Apr 27, 2015
  2. Maffe811

    Maffe811 The forum pet Staff Member

    Joined:
    Jul 2, 2009
    Messages:
    6,813
    Likes Received:
    2
    Trophy Points:
    38
    Location:
    Norway/Norge/Norwegen
    First i missed it :p
    Then i refreshed the page :p

    You should have a fade-on-click
     
  3. mikethedj4

    mikethedj4 Member

    Joined:
    Nov 13, 2010
    Messages:
    594
    Likes Received:
    1
    Trophy Points:
    16
    Gender:
    Male
    Occupation:
    Web UI/UX Designer, Enginner, and Personal Trainer
    Location:
    Rockford, IL
    Home Page:
    I applied what you said to the file in the download.
     
  4. selina

    selina New Member

    Joined:
    Apr 10, 2015
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    1
    Gender:
    Female
    I might do the Ruffy tutorial with the clone tool that the one guy in the comments suggested. Sounds easy enough to finally get something going.
     

Share This Page