javascript - Fade in web elements on page load using jQuery -
trying main logo , enter button fade in when web page loads. tried below code in addition taking divs out after code, no luck.
any ideas? thank in advance.
<!doctype html> <html> <head> <title>the webspace of reality</title> <meta charset="utf-8" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="style.css"> </head> <body> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(function() { $("#mainimage").hide().fadein("slow", function() { $("#enterbutton").hide().fadein("slow") }); }); </script> <div id="mainimage"> </div> <div id="enterbutton"></div> </body> </html> #mainimage img { width: 550px; display: block; position: static; margin-right: auto; margin-left: auto; } #enterbutton button { background-color: black; font-family: futura, helvetica, sans-serif; font-size: 28px; border-radius: 10px; height: 50px; width: 200px; color: white; margin-right: auto; margin-left: auto; display: block; position: static; margin-top: 20px; border-style: none; }
your problem in css. commas added after name selectors:
#mainimage, img { width: 550px; display: block; position: static; margin-right: auto; margin-left: auto; } #enterbutton, button { background-color: black; font-family: futura, helvetica, sans-serif; font-size: 28px; border-radius: 10px; height: 50px; width: 200px; color: white; margin-right: auto; margin-left: auto; display: block; position: static; margin-top: 20px; border-style: none; } hope help.
Comments
Post a Comment