Member Avatar for Bubbleboy

I want to make jQuery animate the fade in of a block of text with a few links in it. Here is the code.

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Home</title>
		<LINK rel="icon" href="/favicon.ico" type="image/x-icon" />
		<LINK rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<LINK rel="stylesheet" href="docs/navbar.css">
		<style>
		html, body { margin: 0; padding: 0; }
		#background { height: 100%; width: 100%; z-index: -5; position: fixed; top: 0; left: 0; }
		#content { z-index: 25; visibility: visible; }
		#mainpara { color: white; font-weight: bold; font-size: 15pt; }
		#starwrek { font-size: 20pt; }
		#starwrekbutton { color: white; text-decoration: none; font-size: 24pt; }
		#starwrekbutton:hover { background: lightblue; }
		#starwrekinfo { border: black solid 3px; width: 40%; }
		#emailform { color: white; }
		</style>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript">
		
		$('#abouttrigger').click(function() {
			$('#about').animate( { opacity: 1 }, 2000);
			});
		
		function changeBackground(newbg){
		object = document.getElementById('background');
		object.src = newbg;
		}
		
		var howmany = 0;
		function ff(){
			if (howmany == 0){
				alert("Don't right click, that's just not cool. But, whatever, here's your right click menu...");
				howmany++;
				
			}
			else if (howmany == 1){
			alert("You better knock it off, you right clickers get into a lot of trouble eventually...");
			howmany++;
			
			}
			else if (howmany == 2){
			alert("That's it, I'm done, I don't care anymore, do what you want.");
			howmany++;
			}
				
		}
		function choosebackground(objectID){
			var randomnumber = Math.floor(Math.random()*5);
			var roundnumber = Math.round(randomnumber);
		 	var object = document.getElementById(objectID);
		 	var backgrounds = new Array();
		 	backgrounds[0] = "docs/Plasma.gif";
		 	backgrounds[1] = "docs/StarField.gif";
		 	backgrounds[2] = "docs/Blocks.gif";
		 	backgrounds[3] = "docs/Droplets.gif";
		 	backgrounds[4] = "docs/JellyFish.gif";
		 	object.src = backgrounds[roundnumber];
		 	
		}
		</script>
		
		
	</head>
	<body oncontextmenu="ff()" onload="choosebackground('background');">
		<!--Background Image-->
		<img id="background" name="background" src="docs/JellyFish.gif">
		<div id="content">
		<!--Navbar-->
		<p id="hi"></p>
		<ul id="nav" class="navbar">
		<li><img src="docs/logo.gif" hight="25" width="35" ></li>
		<li>Home</li>
		<li id="abouttrigger">About
			<ul id="about">
				<li><a href="aboutus.html">Us</a></li>
				<li><a href="aboutproj.html">Projects</a></li>
			</ul></li>
		<li><a href="/photos">Photos</a></li>
		<li><a href="/videos">Videos</a></li>
		<li><a href="/chat">Chat</a></li>
		<li>Change Background
			<ul id="backgrounds" onmouseover="showDropMenu('backgrounds');">
				<li onmouseover="showDropMenu('backgrounds');"><center><img src="docs/PlasmaThumb.gif" height="50" width="75" onclick="changeBackground('docs/Plasma.gif');"></center></li>
				<li onmouseover="showDropMenu('backgrounds');"><center><img src="docs/StarFieldThumb.gif" height="50" width="75" onclick="changeBackground('docs/StarField.gif');"></center></li>
				<li onmouseover="showDropMenu('backgrounds');"><center><img src="docs/BlocksThumb.gif" height="50" width="75" onclick="changeBackground('docs/Blocks.gif');"></center></li>
				<li onmouseover="showDropMenu('backgrounds');"><center><img src="docs/DropletsThumb.gif" height="50" width="75" onclick="changeBackground('docs/Droplets.gif');"></center></li>
				<li onmouseover="showDropMenu('backgrounds');"><center><img src="docs/JellyFishThumb.gif" height="50" width="75" onclick="changeBackground('docs/JellyFish.gif');"></center></li>
			</ul></li>
		</ul>

and the external css file looks like this

#nav { position: absolute; top: 0; left: 0; width: 95%; list-style-type: none; background-image: url('navback.png'); background-repeat: repeat-x; color: orange; }
#nav a { color: orange; text-decoration: none; }
#nav a:visited { color: orange; }
#nav li { float: left; position: relative; padding: 1em;  }
#nav li ul li { clear: left; padding: .5em; }
#nav li ul { opacity: 0; text-decoration: none; position: absolute; left: 5%; top: 100%;  }
#about li { text-decoration: none; list-style-type: none; background: lightgreen; width: 100%; }
#backgrounds li { list-style-type: none; }
#backgrounds li { background: lightgreen; width: 100%; }
#nav a:hover { color: green; border: dashed black 1px; }

It works when i am using my javascript program to just show the navbar. But when i try to use jQuery to fade it on a click, no good. What am i doing wrong!

  • 2 Contributors
  • 1 Reply
  • 553 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by Daiva
Member Avatar for Daiva

#about element is already in opacity: 1, so you don't see any animation. Try this and you should see your text fading out:

$(document).ready(function() {
  $("#abouttrigger").click(function(){
    $('#about').animate( { opacity: 0 }, 2000);
  });
});

If you need just a fade in effect then you can try:

$(document).ready(function() {
  $("#about").hide();
  $("#abouttrigger").click(function(){
    $("#about").slideToggle('slow');
  });
});

or

$(document).ready(function() {
  $("#about").hide();
  $("#abouttrigger").click(function(){
    $("#about").fadeIn('slow');
  });
});
Edited by Daiva because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.