How to make my div tags animated?

Page 1 of 1

5 Replies - 1214 Views - Last Post: 12 December 2011 - 08:12 PM

#1 Eludiac  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 12-December 11

How to make my div tags animated?

Posted 12 December 2011 - 11:47 AM

Hey guys first time poster and complete jquery/javascript noob. recently one of my webdesign clients wanted me to make him an animated splash page for his site but I didnt want to use flash because flash is going by the wayside very quickly. so now im trying to use jquery to make my divs fade in and slide up and down and stuff like that. something that doesnt seem too complicated, but im terribly at figuring out the proper way to make my code work. so far all i have is this 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
	height: 750px;
	width: 1000px;
	margin-top: 200px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}
#top {
	height: 175px;
	width: 1000px;
	z-index: 1;
}
#sales {
	height: 40px;
	width: 500px;
	z-index: 2;
	margin-left: 310px;
	left: 65px;
	top: 367px;
}
#bp {
	height: 400px;
	width: 1000px;
}
#business {
	float: left;
	height: 350px;
	width: 300px;
	margin-top: 40px;
	margin-left: 100px;
}
#pleasure {
	float: right;
	height: 350px;
	width: 300px;
	margin-top: 40px;
	margin-right: 100px;
}
#bp_text {
	height: 50px;
	width: 300px;
	margin-top: 300px;
}
#contact {
	height: 50px;
	width: 400px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
}
#divline {
	height: 10px;
	width: 1000px;
	margin-top: 30px;
}
</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
	$(document).ready(function () {
		$("#top").fadeIn(400);
    });
    </script>
</head>

<body>
<div id="container">
  <div id="top"><img src="images/DHE-Logo-(splash).png" width="1000" height="167" alt="splash" /></div>
  <div id="sales"><img src="images/salesserviceselection.png" width="490" height="40" alt="sss" /></div>
  <div id="bp">
    <div id="business">Content for  id "business" Goes Here
      <div id="bp_text"><img src="images/b-text.png" width="300" height="60" /></div>
    </div>
    <div id="pleasure">Content for  id "pleasure" Goes Here
    <div id="bp_text"><img src="images/p-text.png" width="300" height="60" alt="p-text" /></div></div>
  </div>
  <div id="divline"><img src="images/linediv.png" width="1000" height="10" alt="line" /></div>
<div id="contact"><img src="images/contact.png" width="400" height="50" alt="contact" /></div>
</div>


</body>
</html>


Every time i preview the page in a browser the "top" div tag just sits there, instead of fading in. Basically what i want the divs on the page to do is to be animated as soon as the page opens. is it a possibility that the fade in occurs before the page appears on my browser? do i have to add some more code for delay? any suggestions?

thank you all so much in advance for putting up with my dumb questions. haha

umm, the code in question is on line 67.

Is This A Good Question/Topic? 0
  • +

Replies To: How to make my div tags animated?

#2 Eludiac  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 12-December 11

Re: How to make my div tags animated?

Posted 12 December 2011 - 11:57 AM

and what is the correct way to add more animation effects into the code? for instance would i put $(#sales).fadeIn(400); right behind the semicolon of the fade in i did for #top? So like this?: 

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
    $(document).ready(function () {
        $("#top").fadeIn(400);
        $("#sales").fadeIn(500);

    });
    </script>
</head>

Was This Post Helpful? 0
  • +
  • -

#3 Eludiac  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 12-December 11

Re: How to make my div tags animated?

Posted 12 December 2011 - 12:08 PM

I almost just think I coded something wrong or put some of the code in the wrong place or something...
Was This Post Helpful? 0
  • +
  • -

#4 xxxjj18  Icon User is online

  • D.I.C Head
  • member icon

Reputation: 49
  • View blog
  • Posts: 166
  • Joined: 30-November 11

Re: How to make my div tags animated?

Posted 12 December 2011 - 06:06 PM

I don't believe you need to include the "#" tag within the line "$("#top").fadeIn(400);"; that would fix the problem (to my brief knowledge of jQuery). But as for a solution that I definitely know works, you could do something like this:

$top = document.getElementById("top");

$(top).fadeIn(400);


That will work. But as I stated above, just remove the "#" from your line, and it should work perfectly
Was This Post Helpful? 1
  • +
  • -

#5 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 751
  • View blog
  • Posts: 1,537
  • Joined: 30-January 09

Re: How to make my div tags animated?

Posted 12 December 2011 - 06:13 PM

No, you do need to include the #. That's the selector for an ID, and the ID of the element you want is 'top', hence '#top' is correct.

The problem you're having is that the #top element is already displayed, so you're fading in from visible to visible, hence no animation.

Simply change the style for your #top element to this:
#top {
	display: none;
	height: 175px;
	width: 1000px;
	z-index: 1;
}

That way it is fading in from not-visible to visible.

And to answer your second post, that is the correct syntax for animating multiple DOM elements, no need to change it :)
Was This Post Helpful? 1
  • +
  • -

#6 Eludiac  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 12-December 11

Re: How to make my div tags animated?

Posted 12 December 2011 - 08:12 PM

OH you are simply a genius. I had NEVER thought of that before. thank you so much, that was like web-based columbo stuff :) thank you both so much. I will try it first thing in the morning :)
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1