Another jQuery Question

iEthan

Member
How can I fade in a div 1000 milliseconds after the page loads. I have this code:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <!--- Start Main --->
            <title>Ethan Turkeltaub</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!--- End Main --->
        <!--- Start Stylesheets --->
            <style type="text/css">
                body{
                    background-color:#000;
                    margin:0;
                    padding:0;
                }
                #image{
                    background-image:url('image.png');
                    background-repeat:no-repeat;
                    width:1000px;
                    height:800px;
                    margin:0;
                    padding:0;
            </style>
        <!--- End Stylesheets --->
        <!--- Start Javascript --->
            <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
            <script type="text/javascript">
                $(document).ready(function(){
                    
                });
            </script>
        <!--- End Javascript --->
    </head>
<body>
    <div id="image" />
</body>
</html>

What jQuery should I add to fade in
HTML:
<div id="image" />
 
hrrrm....

Code:
<style type="text/css" media="screen">#image {display:none;}</style>

Code:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>            <script type="text/javascript">                              $(document).ready(function(){                       $("#image").fadeIn("slow");                });            </script>

Effects/fadeIn - jQuery JavaScript Library


10 sec google = above then its a min coding.
 
Alright, here we go:

index.php
HTML:
<?php
/*--------------------------
Ethan Turkeltaub Site
Build 0.3

index.php
--------------------------*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <!--- Start Main --->
            <title>Ethan Turkeltaub</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!--- End Main --->
        <!--- Start Stylesheets --->
            <link rel="stylesheet" media="screen,projection" href="<?php ?><?php bloginfo('stylesheet_url'); ?>" />
        <!--- End Stylesheets --->
        <!--- Start Javascript --->
            <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function(){
                    $(".image").fadeIn("slow");
                });
            </script>
        <!--- End Javascript --->
        <!--- Start SEO --->
            <meta name="verify-v1" content="CEpwk3D/Wftp4w+O3B7fuX3c63JJ9kpKDm/Vc8d7COg=" />
        <!--- End SEO --->
    </head>
<body>
    <div class="image"></div>
</body>
</html>

style.css
Code:
/*-----------------------------Theme Name: Empty SiteDescription: This is what to put up when the site is under maintenance or restoration.Version: 0.3Author: Ethan TurkeltaubAuthor URI: http://localhost-----------------------------*/body{    background-color:#000;    margin:0;    padding:0;}.image{    background-image:url(image.png);    background-repeat:no-repeat;    width:1000px;    height:800px;    margin:0;    padding:0;}

Hrm. I'm not sure what's going on.
 
simply... your .image needs to have display:none; set in order for jquery to show it,... basically it looks for the opacity of the element, and fades it in from that to 0, therfore if your image is already 100% visible then the fade doesn't seem to take place from a visual view however the code is working correctly.

add...

Code:
.image{    background-image:url(image.png);    background-repeat:no-repeat;    width:1000px;    height:800px;    margin:0;    padding:0;    display:none;}
or if your worried about users with no js enabled modify four jquery code so it reads...

Code:
<script type="text/javascript">                                              $(document).ready(function(){                    $(".image").hide().fadeIn("slow");                });                                            </script>
let me know how you get on.
 
Back
Top