Animate Fade In (JQuery)

Page 1 of 1

13 Replies - 1227 Views - Last Post: 12 January 2013 - 05:20 PM

#1 teamsilvamma

D.I.C Head

Reputation: -2

Posts: 144
Joined: 17-January 12

Animate Fade In (JQuery)

Posted 11 January 2013 - 08:18 AM

I'm tired of staring at coded and not seeing the problem. So I need a colleague to throw me a bone. I'm building this site for my training school and all I want is the logo (which it has position:absolute properties and its own <div> to fade in when the page loads.

Can you please help me out? here's the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<title>HBGMMA</title>
    
    <meta name="description" content=" "/>
    <meta name="keywords" content=" "/>
    <meta name="author" content="LOTUS Marketing Solutions"/>
    <meta http-equiv="Content-Language" content="en"/>
    <meta name="revisit-after" content="7 days"/>
    <meta name="robots" content="index, follow"/>
    <meta name="Rating" content="General"/>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	
	<link rel="stylesheet" href="css/style.css" type="text/css"/>

            <!--[if IE 6]>
		                <link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" />
	        <![endif]-->
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.jcarousel.js"></script>
    <script type="text/javascript" src="js/jquery-func.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

</head>
<body>
	<div id="background">
		<div id="header">
			<div>
                <div>
					<a href="index.html" class="logo"><img src="images/HBGMMA.png" alt=""/></a>
					<ul>
						<li class="selected">
							<a href="index.html" id="menu1">welcome</a>
						</li>
						<li>
							<a href="programs.html" id="menu2">programs</a>
						</li>
						<li>
							<a href="schedules.html" id="menu3">schedules</a>
						</li>
						<li>
							<a href="about.html" id="menu4">about us</a>
						</li>
						<li>
							<a href="contact.html" id="menu5">contact us</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div id="body">
			<div>
                
				<div> 
					<div class="featured">
						<img src="images/featuredlogo2.png" alt=""/>                        
					<div class="animated">
                        <img id="logo" src="images/HBGMMALOGO.png" alt="" />
                    
                            <script type="text/javascript">
                                $('#animated').ready(function () {
                                    $('#logo').fadeIn('slow', function () {
                                        //$("animated").fadeIn(500);
                                    });
                                    //return false;
                                });
                            </script>
                    </div>
                    </div>
                    
					<div class="section">
						<div>
							<h3>Welcome to Harrisburg MMA</h3>
							<div>
								<p>
									At Harrisburg MMA, we have a full staff trained to meet your athletic needs whatever they may be. Whether you are interested in competing in 
                                    combat sports, learning self-defense, improving your martial art discipline, or simply getting in the best shape of your life; we can accomodate
                                     you and we are extremely flexible. <a href="programs.html" class="more" style="float:right">Find Out More</a>
								</p>
							</div>
						</div>
						<div>
							<h3>Combatives</h3>
							<div>
								<a href="programs.html" class="figure"><img src="images/mma4.jpeg" alt="" width="176px" height="130px"/></a>
								<span><a href="programs.html">MMA, BJJ, Boxing, Muay Thai, and more</a></span>
							</div>
						</div>
						<div>
							<h3>Non-Combatives</h3>
							<div>
								<a href="programs.html" class="figure"><img src="images/workout.jpg" alt="" width="176px" height="130px"/></a>
								<span><a href="programs.html">Self-Defense, Weight-Loss, Children, and more</a></span>
							</div>
						</div>
					</div>
				</div>

                
			</div>
		</div>
		<div id="footer">
			<div>
            <table>
				<tr>
                    <td class="facebook">
                        <a href="http://www.facebook.com/hbg.mma.5?fref=ts">Follow us on </a>
                    </td>
                </tr>
            </table>   
            <span>345 Carlisle St. 4th Floor. Harrisburg, PA 17111 - 717 810 9904 - hbgmma@yahoo.com</span>
                <br /><br />
	        <p>@ copyright 2012. all rights reserved. Website created by <a href="http://www.lotusmarketingsolutions.com">LOTUS Marketing Solutions</a></p>
			</div>
		</div>
	</div>
</body>
</html>

css

/******************************

    Fonts

******************************/   
@font-face {
	font-family: 'Philosopher-Regular';
	src: url('../fonts/Philosopher-Regular/Philosopher-Regular.eot');
	src: url('../fonts/Philosopher-Regular/Philosopher-Regular.woff') format('woff'), url('../fonts/Philosopher-Regular/Philosopher-Regular.ttf') format('truetype'), url('../fonts/Philosopher-Regular/Philosopher-Regular.svg') format('svg');
}
@font-face {
	font-family: 'Philosopher-Bold';
	src: url('../fonts/Philosopher-Bold/Philosopher-Bold.eot');
	src: url('../fonts/Philosopher-Bold/Philosopher-Bold.woff') format('woff'), url('../fonts/Philosopher-Bold/Philosopher-Bold.ttf') format('truetype'), url('../fonts/Philosopher-Bold/Philosopher-Bold.svg') format('svg');
}

.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }

body {
	background: url(../images/bg-body.jpg) repeat;
	color: #727272;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1;
	margin: 0;
	min-width: 960px;
	padding: 0;
}
#background {
	background: url(../images/bg-page.jpg) no-repeat top center;
	margin: 0;
	padding: 0;
}
/******************************

    Header

******************************/   

#header {
	background: url(../images/bg-header2.png) repeat-x top center;
	margin: 0;
	padding-top: 5px;
}
#header > div {
	background: url(../images/bg-header.png) no-repeat top center;
	margin: 0;
	padding: 0;
}
#header > div > div {
	height: 147px;
	margin: 0 auto;
	padding: 49px 0 0;
	position: relative;
	width: 960px;
	z-index: 5;
}
#header a.logo {
	display: block;
	margin: 0;
	padding: 0 2% 0 2%;
	width: 920px;
}
#header a.logo img {
	border: 0;
	display: block;
}
#header ul {
	background: url(../images/bg-navigation.png) no-repeat center center;
	bottom: -107px;
	height: 98px;
	left: 30px;
	margin: 0 auto;
	overflow: hidden;
	padding: 9px 17px;
	position: absolute;
	width: 865px;
}
#header ul li {
	display: block;
	float: left;
	list-style: none;
	margin: 0 5px;
	padding: 0;
}
#header ul li a {
	background: url(../images/menu.png) no-repeat;
	color: #a8a8a8;
	display: block;
	font-family: 'Philosopher-Bold';
	font-size: 16px;
	font-weight: normal;
	height: 98px;
	letter-spacing: 0.07em;
	line-height: 104px;
	margin: 0;
	padding: 0;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 163px;
}
#header ul li #menu1 {
	background-position: 0 0;
}
#header ul li #menu2 {
	background-position: -168px 0;
}
#header ul li #menu3 {
	background-position: -335px 0;
}
#header ul li #menu4 {
	background-position: -502px 0;
}
#header ul li #menu5 {
	background-position: -669px 0;
}
#header ul li a:hover, #header ul li.selected a {
	color: #fff;
}
#header ul li #menu1:hover, #header ul li.selected #menu1 {
	background-position: 0 -113px;
}
#header ul li #menu2:hover, #header ul li.selected #menu2 {
	background-position: -168px -113px;
}
#header ul li #menu3:hover, #header ul li.selected #menu3 {
	background-position: -335px -113px;
}
#header ul li #menu4:hover, #header ul li.selected #menu4 {
	background-position: -502px -113px;
}
#header ul li #menu5:hover, #header ul li.selected #menu5 {
	background-position: -669px -113px;
}

/******************************

    Main Body

******************************/   
#body {
	background: url(../images/bg-body-header.png) no-repeat top center;
	margin: 0 auto;
	padding: 112px 0 0;
	width: 960px;
}
#body p {
	margin: 0;
	padding: 0;
}
#body p a {
	color: #797979;
}
#body p a:hover {
	color: #a3a3a3;
}
#body > div {
	background: url(../images/bg-body-footer.png) no-repeat bottom center;
	margin: 0;
	padding: 0 0 114px;
}
#body > div > div {
	background: url(../images/bg-body2.png) repeat-y top center;
	min-height: 400px;
	margin: 0;
	padding: 0;
}
#body div div .featured {
	height: 361px;
	margin: 0;
	padding: 0;
	position: relative;
	width: 960px;
}
/*this is the logo*/
#body div div .animated  {
    position:absolute;
    top:0px;
    left:-20px;
}
                          
#body div div .featured img {
	display: block;
	left: 0;
	position: absolute;
	top: -112px;
	z-index: 1;
}
#body div div .section {
	background: #0a0a0a url(../images/gradient.png) repeat-x bottom center;
	margin: 0 auto;
	overflow: hidden;
	padding: 102px 9px 22px 9px;
	width: 940px;
}
#body div div .section > div {
	background: url(../images/border.gif) repeat-x top left;
	float: left;
	margin: 0 10px;
	padding: 3px 0 0;
	width: 220px;
}
#body div div .section > div:first-child {
	width: 440px;
}
#body div div .section div h4 {
	background: #070707 url(../images/gradient2.png) repeat-x top center;
	border: 1px solid #22272a;
	color: #fff;
	font-size: 14px;
	line-height: 24px;
	margin: 0 0 1px;
	padding: 10px 19px;
}
#body div div .section div div {
	background: #181818;
	border: 1px solid #22272a;
	margin: 0;
	padding: 20px 19px;
}
#body div div .section div:first-child div {
	padding: 14px 19px 30px;
}
#body div div .section div div p {
	line-height: 24px;
	margin: 0;
	padding: 0;
}
#body div div .section div div p a {
	color: #727272;
}
#body div div .section div div p a.more {
	background: url(../images/bg-more.png) no-repeat center center;
	color: #bababa;
	display: inline-block;
	height: 23px;
	font-size: 10px;
	font-weight: normal;
	line-height: 22px;
	margin: 0 0 0 12px;
	padding: 0;
	text-align: center;
	text-decoration: none;
	text-transform: lowercase;
	width: 70px;
}
#body div div .section div div p a:hover {
	color: #a3a3a3;
}
#body div div .section div div p a.more:hover {
	background: url(../images/bg-more-hover.png) no-repeat center center;
	color: #bababa;
}
#body div div .section div h3 {
	background: #070707 url(../images/gradient3.png) repeat-x top center;
	border: 1px solid #22272a;
	color: #fff;
	font-family: 'Philosopher-Bold';
	font-size: 16px;
	font-weight: normal;
	height: 50px;
	letter-spacing: 0.07em;
	line-height: 50px;
	margin: 0 0 1px;
	padding: 0 19px;
	text-transform: uppercase;
}
#body div div .section div div a.figure {
	border: 1px solid #22272a;
	display: block;
	margin: 0;
	padding: 0;
}
#body div div .section div div a.figure:hover {
	opacity: 0.8;
}
#body div div .section div div a.figure img {
	border: 1px solid #000;
	display: block;
}
#body div div .section div div span {
	background: #181a1a url(../images/gradient4.png) repeat-x bottom left;
	border-bottom: 1px solid #22272a;
	border-left: 1px solid #22272a;
	border-right: 1px solid #22272a;
	display: block;
	height: 48px;
}
#body div div .section div div span a {
	color: #a7a9ac;
	display: block;
	font-size: 12px;
	line-height: 20px;
	margin: 0;
	padding: 0 9px;
	text-align: center;
	text-decoration: none;
}
#body div div .section div div span a:hover {
	color: #fff;
}

#body .media, #body .games, #body .about, #body .blog {
	margin: 0;
	padding: 24px 0;
}

/******************************

    Programs Page

******************************/

#body .games {
	overflow: hidden;
}
#body .games div {
	margin: 0;
	padding: 0;
}
#body .games h3 {
	background: #070707 url(../images/gradient3.png) repeat-x top center;
	border: 1px solid #22272a;
	color: #fff;
	font-family: 'Philosopher-Bold';
	font-size: 16px;
	font-weight: normal;
	height: 50px;
	letter-spacing: 0.07em;
	line-height: 50px;
	margin: 0 0 1px;
	padding: 0 19px;
	text-transform: uppercase;
}
#body .games div ul {
	background: #181818;
	border: 1px solid #22272a;
	margin: 0;
	padding: 0;
}
#body .games div ul li {
	border: 1px solid #22272a;
	list-style: none;
	margin: 0;
	padding: 0;
}
#body .games div ul li a.figure {
	display: inline-block;
	margin: 0;
	padding-top: 6px;
	padding-left: 6px;
	padding-bottom: 6px;
}
#body .games div ul li a.figure:hover {
	opacity: 0.8;
}
#body .games div ul li a.figure img {
	border: 1px solid #000;
	display:block;
}
#body .games div ul li span {
	background: #181a1a url(../images/gradient3.png) repeat-x bottom left;
	border-top: 1px solid #22272a;
	display: block;
}
#body .games div ul li span a {
	color: #a7a9ac;
	display: block;
	margin: 0;
	padding: 0 9px;
	text-decoration: none;
}
#body .games div ul li span a:hover {
	color: #fff;
}
#body .games .content {
	background: url(../images/border.gif) repeat-x top left;
	float: left;
	margin: 10px 0 0 19px;
	padding: 3px 0 0;
	width: 920px;
}
#body .games .content ul {
	padding: 16px 19px 1px;
}
#body .games .content ul li {
	margin: 0 0 10px;
}
#body .games .content ul li span a {
	font-size: 14px;
	height: 70px;
	line-height: 20px;
}
#body .games .asideleft {
	background: url(../images/border.gif) repeat-x top left;
	float: left;
	margin: 10px 0 0 19px;
	padding: 3px 0 0;
	width: 440px;
}
#body .games .asideleft ul {
 *min-height: 568px;
	overflow: hidden;
	padding: 5px 8px 11px;
}
#body .games .asideleft ul li {
	float: left;
	margin: 11px 10px;
	width: 188px;
}
#body .games .asideleft ul li span a {
	font-size: 12px;
	height: 38px;
	line-height: 38px;
	text-align: center;
}

#body .games .asideright {
	background: url(../images/border.gif) repeat-x top left;
	float: right;
	margin: 10px 19px 10px 0;
	padding: 3px 0 0;
	width: 440px;
}
#body .games .asideright ul {
 *min-height: 568px;
	overflow: hidden;
	padding: 5px 8px 11px;
}
#body .games .asideright ul li {
	float: left;
	margin: 11px 10px;
	width: 188px;
}
#body .games .asideright ul li span a {
	font-size: 12px;
	height: 38px;
	line-height: 38px;
	text-align: center;
}

#body .games .article {
	clear: both;
	float: left;
	margin: 10px 0 0 19px;
	padding: 3px 0 0;
	width: 920px;
}

#body .games .article ul {
 *min-height: 568px;
	overflow: hidden;
	padding: 5px 8px 11px;
}
#body .games .article ul li {
	float: left;
	margin: 11px 0px;
	width: 188px;
}
#body .games .article ul li span a {
	font-size: 12px;
	height: 38px;
	line-height: 38px;
	text-align: center;
}
#body .games .article p {
	font-size: 12px;
	line-height: 24px;
	padding: 11px 20px 0;
}
#body .games .article p a {
	color: #797979;
}
#body .games .article p a:hover {
	color: #a3a3a3;
}
/******************************

    Schedules Page

******************************/


#body .media > div {
	margin: 0;
	overflow: hidden;
	padding: 0 10px;
}
#body .media > div > div {
	background: url(../images/border.gif) repeat-x top left;
	float: left;
	margin: 0 10px;
	padding: 3px 0 0;
	width: 450px;
}
#body .media h3 {
	background: #070707 url(../images/gradient3.png) repeat-x top center;
	border: 1px solid #22272a;
	color: #fff;
	font-family: 'Philosopher-Bold';
	font-size: 16px;
	font-weight: normal;
	height: 50px;
	letter-spacing: 0.07em;
	line-height: 50px;
	margin: 0 0 1px;
	padding: 0 19px;
	text-transform: uppercase;
}
#body .media ul {
	background: #181818;
	border: 1px solid #22272a;
	margin: 0;
	overflow: hidden;
	padding: 0;
}
#body .media ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}
#body .media div div ul {
	padding: 8px;
}
#body .media div div ul li {
	border: 1px solid #22272a;
	display: block;
	float: left;
	margin: 8px 10px;
	padding: 0;
	width: 194px;
}
#body .media div div ul li a.figure {
	display: block;
	margin: 0;
	padding: 0;
}
#body .media div div ul li a.figure:hover {
	opacity: 0.8;
}
#body .media div div ul li a.figure img {
	border: 1px solid #000;
	display: block;
}
#body .media div div ul li span {
	background: #181a1a url('../images/gradient4.png') repeat-x left bottom;
	border-top: 3px solid #22272a;
	display: block;
	padding:5px;
	height: auto;
}
#body .media div div ul li span a {
	color: #a7a9ac;
	display: block;
	font-size: 12px;
	line-height: 18px;
	margin: 0;
	padding: 0 9px;
	text-align: center;
	text-decoration: none;
}
#body .media div div ul li span a:hover {
	color: #fff;
}
#body .media .article {
	background: url(../images/border.gif) repeat-x top left;
	margin: 17px auto 0;
	padding: 3px 0 0;
	width: 920px
}
#body .media .article ul {
	padding: 0 10px;
}
#body .media .article ul li {
	display: block;
	float: left;
	margin: 0 9px;
	overflow: hidden;
	padding: 0 0 10px;
	width: 430px;
}
#body .media .article ul li a.figure {
	border: 1px solid #22272a;
	float: left;
	display: block;
	margin: 19px 13px 0 0;
	padding: 0;
}
#body .media .article ul li a.figure:hover {
	opacity: 0.8;
}
#body .media .article ul li a.figure img {
	border: 1px solid #000;
	display: block;
}
#body .media .article ul li p {
	font-size: 12px;
	line-height: 24px;
	padding: 13px 0 0;
}
#body .media .article ul li p a {
	color: #727272;
}
#body .media .article ul li p a:hover {
	color: #a3a3a3;
}


/******************************

    About Page

******************************/

#body .about {
	overflow: hidden;
}
#body .about ul {
	margin: 0;
	padding: 0;
}
#body .about ul li {
	background: url(../images/border.gif) repeat-x top left;
	list-style: none;
	margin: 0 0 20px;
	padding: 3px 0 0;
}
#body .about ul li h3 {
	background: #070707 url(../images/gradient3.png) repeat-x top center;
	border: 1px solid #22272a;
	color: #fff;
	font-family: 'Philosopher-Regular';
	font-size: 24px;
	font-weight: normal;
	height: 55px;
	line-height: 55px;
	margin: 0 0 1px;
	padding: 0 19px;
	text-transform: capitalize;
}
#body .about ul li div {
	background: #181818;
	border: 1px solid #22272a;
	margin: 0;
	min-height: 250px;
	padding: 11px 19px;
}
#body .about ul li div p {
	line-height: 24px;
	padding: 0 0 28px;
}
#body .about ul li div p span {
	font-size: 16px;
	text-transform: uppercase;
}
#body .about ul li div > span {
	text-transform: uppercase;
	line-height: 24px;
}
#body .about .content {
	float: left;
	margin: 0 0 0 20px;
	padding: 0;
	width: 560px;
}
#body .about .aside {
	float: left;
	margin: 0 0 0 20px;
	padding: 0;
	width: 340px;
}

/******************************

    Slider

******************************/
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
  
  .rslides_tabs {
  list-style: none;
  padding: 0;
  background: rgba(0,0,0,.25);
  box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  -moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  font-size: 16px;
  list-style: none;
  margin: 0 auto 50px;
  max-width: 540px;
  padding: 10px 0;
  font-family:Philosopher;
  text-align: center;
  width: 100%;
  }

.rslides_tabs li {
  display: inline;
  float: none;
  margin-right: 1px;
  }

.rslides_tabs a {
  width: auto;
  line-height: 20px;
  padding: 9px 20px;
  height: auto;
  background: transparent;
  display: inline;
  color:Teal;
  }

.rslides_tabs li:first-child {
  margin-left: 0;
  }

.rslides_tabs .rslides_here a {
  background: rgba(255,255,255,.1);
  color: #828282;
  font-weight: bold;
  }

/******************************

    Contact Us Page

******************************/

#body .blog {
	overflow: hidden;
}
#body .blog ul {
	margin: 0;
	padding: 0;
}
#body .blog ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}
#body .blog ul li b {
	
	color: #fff;
	font-family: 'Philosopher-Regular';
	font-size: 24px;
	font-weight: normal;
	height: 35px;
	line-height: 55px;
	margin: 0 0 1px;
	padding: 0 19px;
	text-transform: capitalize;
}
#body .blog .content {
	background: url(../images/border.gif) repeat-x top left;
	float: left;
	margin: 0 0 0 20px;
	padding: 3px 0 0;
	width: 920px;
}
#body .blog .content ul li {
	padding: 0 0 0 0;
}

#body .blog .content ul li .wrapper{}

#body .blog .content ul li .header {
	background: #070707 url(../images/gradient5.png) repeat-x top center;
	border: 1px solid #22272a;
	color: #fff;
	font-size: 14px;
	line-height: 24px;
	margin: 0 0 1px;
	overflow: hidden;
	padding: 10px 18px 15px;
}

#body .blog .content ul li .header b {
	display: inline;
	float:left;
	line-height: 24px;
	margin: 0;
	padding: 0;
}
#body .blog .content ul li .header b a {
	color: #fff;
}
#body .blog .content ul li .header b a:hover {
	color: #727272;
}
#body .blog .content ul li .header span {
	background: #181818;
	border: 1px solid #22272a;
	border-radius: 4px;
	display: inline;
	float: left;
	margin: 0 0 0 34px;
	overflow: hidden;
	padding: 0;
}
#body .blog .content ul li .header span a {
	color: #bababa;
	display: block;
	float: left;
	font-size: 10px;
	height: 23px;
	line-height: 23px;
	margin: 0;
	padding: 0 15px;
	text-align: center;
	text-decoration: none;
	text-transform: capitalize;
}
#body .blog .content ul li .header span a:first-child {
	border-right: 1px solid #22272a;
}
#body .blog .content ul li .header span a:hover {
	color: #fff;
}
#body .blog .content ul li .article {
	background: #181818;
	border: 1px solid #22272a;
	margin-bottom: 10px;
	overflow: hidden;
	padding: 10px 14px 19px 19px;
}
#body .blog .content ul li .article a.figure {
	border: 1px solid #22272a;
	display: block;
	float: left;
	margin: 6px 20px 0 0;
	padding: 0;
}
#body .blog .content ul li .article a.figure:hover {
	opacity: 0.8;
}
#body .blog .content ul li .article a.figure img {
	border: 1px solid #000;
	display: block;
}
#body .blog .content ul li .article p {
	line-height: 20px;
}
#body .blog .content ul li .article p a.more {
	background: url("../images/bg-more.png") no-repeat center center;
	color: #bababa;
	display: inline-block;
	font-size: 10px;
	font-weight: normal;
	height: 23px;
	line-height: 22px;
	margin: 0;
	padding: 0;
	text-align: center;
	text-decoration: none;
	text-transform: lowercase;
	width: 70px;
}
#body .blog .content ul li .article p a.more:hover {
	color: #fff;
}


/******************************

    Contact Form

******************************/   

#contact-form {display:block; width:100%; border-style:hidden;}
fieldset { border-style: hidden; }
.contactwrapper {width:100%; height:100%; overflow:hidden;}
.extra-wrap {overflow:hidden;}
	
	#contact-form label {
		display:block; 
		height:30px; 
		overflow:hidden;
	}
	#contact-form input {
		float:left; 
		width:232px; 
		font-size:12px; 
		line-height:1.25em;
		color:#808080;
		padding:2px 10px; 
		margin:0; 
		font-family:Arial, Helvetica, sans-serif; 
		border:3px solid #818181;
		background:#fff;
		outline:none;
	}
	#contact-form textarea {
		float:left;
		height:145px; 
		width:474px;
		max-height:204px; 
		max-width:474px;
		font-size:12px; 
		line-height:1.25em;
		color:#808080;
		padding:5px 10px; 
		margin:0; 
		font-family:Arial, Helvetica, sans-serif; 
		border:3px solid #818181;
		background:#fff;
		overflow:auto;
		outline:none;
	}
	
.text-form {
	float:left; 
	display:block; 
	line-height:24px;
	width:115px; 
}


   
/******************************

    Footer

******************************/   

#footer {
	background: ;url(../images/bg-footer2.png) repeat-x bottom left;
	margin: 0;
	padding: 0;
}
#footer > div {
	background: url(../images/bg-footer.png) no-repeat bottom center;
	margin: 0;
	text-align: center;
	padding: 73px 0 42px;
}
#footer table {
	display: block;
	margin: 0 auto;
	padding-top: 45px;
	padding-bottom: 45px;
	margin-left:350px;
	overflow: hidden;
	width: 100%;
}
#footer table tr {
	display: block;	
	list-style: none;	
	padding-left: 330px;
}
#footer table tr a {
	background: url(../images/FB.png) 0 0 no-repeat;
	color:#828282;
	font-family:Pneumatics Wide BRK;
	font-weight:lighter;
    font-size:large;
	display: inline-block;
	line-height: 73px;
	height: 73px;	
	text-decoration:none;
	text-transform:capitalize;
	text-indent: -650px;
	width: 473px;
}

#footer tr td .facebook a {
	background-position: 0 0;
}
#footer tr td .facebook a:hover {
	background-position: -78px 0;
}
#footer td #twitter a {
	background-position: 0 -78px;
}
#footer td #twitter a:hover {
	background-position: -78px -78px;
}
#footer td #googleplus a {
	background-position: 0 -156px;
}
#footer td #googleplus a:hover {
	background-position: -78px -156px;
}

#footer tr td .info {
	background-position: 0 0;
	
}


   
#footer td #info a:hover {
	background-position: -78px 0;
}

#footer p {
	color: #4e5151;
	font-size: 12px;
	margin: 0;
	padding: 0;
	text-align: center;
	text-transform: capitalize;
}

I included the entire css just in case you want to run it in your comps, although you don't have the pics but here it is anyway

thanks

Is This A Good Question/Topic? 0

Replies To: Animate Fade In (JQuery)

#2 Anthonidas

D.I.C Head

Reputation: 29

Posts: 192
Joined: 25-April 11

Re: Animate Fade In (JQuery)

Posted 11 January 2013 - 08:58 AM

do you think it animates on his own?!

there is no jquery function defined, that animates your logo, and there is no animation set in your CSS logo class...

in addition: why are you using jquery 1.4.2 AND jquery latest-version???

Was This Post Helpful? 0

#3 teamsilvamma

D.I.C Head

Reputation: -2

Posts: 144
Joined: 17-January 12

Re: Animate Fade In (JQuery)

Posted 11 January 2013 - 09:11 AM

Anthonidas, on 11 January 2013 - 10:58 AM, said:

do you think it animates on his own?!

/>

there is no jquery function defined, that animates your logo, and there is no animation set in your CSS logo class...

in addition: why are you using jquery 1.4.2 AND jquery latest-version???

Pardon me lol. I'm teaching myself JQuery. I was watching tutorials in JQuery.com and it never mentioned anything about building the function. I assumed it was included in the JQuery Plugin.

Could you help me forward to get this working today? I promise, this is not homework or anything like that. But once I see your code I can learn from it a lot because it will clearify all my questions.

If you're busy I can understand. This site will go live with or without the animation anyway, but I thought it would give it a nice spin

Was This Post Helpful? 0

#4 Anthonidas

D.I.C Head

Reputation: 29

Posts: 192
Joined: 25-April 11

Re: Animate Fade In (JQuery)

Posted 11 January 2013 - 09:50 AM

i think on jquery's site are enough examples... otherwise is google your best friend.

http://api.jquery.com/fadeIn/

Was This Post Helpful? 0

#5 teamsilvamma

D.I.C Head

Reputation: -2

Posts: 144
Joined: 17-January 12

Re: Animate Fade In (JQuery)

Posted 11 January 2013 - 10:09 AM

Anthonidas, on 11 January 2013 - 11:50 AM, said:

i think on jquery's site are enough examples... otherwise is google your best friend.

http://api.jquery.com/fadeIn/

If you notice my code, you'll see that I already exhausted that site. In fact the script I got was copied/pasted and modified from that site. Been in Google for a few days and nothing specific either.

The jquery site doesn't have any function or jquery plugin specs.

Do you know how to do this or are you trying to figure it out like me?

Was This Post Helpful? 0

#6 Anthonidas

D.I.C Head

Reputation: 29

Posts: 192
Joined: 25-April 11

Re: Animate Fade In (JQuery)

Posted 11 January 2013 - 10:27 AM

no i'm not figuring it out like you, because i know what jquery is and how to work with it.

immagine you would like to paint a wall. you can not take a bucket of paint and think the wall is going to be paint after some waiting... you should open your bucket, see what you have in there and afterwards think how you could use that.

you can not try to animate anything with jquery, when you do not even know what jquery is, do you?!

So i will not give you the code to do your animation. Instead you should learn some HTML, then some CSS and after that you can start with JS or JQUERY or whatever you want. It is not possible that you copy everything without understanding what you are doing. If you are exhausted with HTML do not consider to go further... stop where you are.

This post has been edited by Anthonidas: 11 January 2013 - 10:29 AM

Was This Post Helpful? -1

#7 teamsilvamma

D.I.C Head

Reputation: -2

Posts: 144
Joined: 17-January 12

Re: Animate Fade In (JQuery)

Posted 11 January 2013 - 10:35 AM

Anthonidas, on 11 January 2013 - 12:27 PM, said:

Some help you are. Why are you even here? This forum is not just for advanced people. If anything, this is for people who are learning to come get help. For you to tell me "go to their site and learn" well, duh!!! I'm obviously here cause I need help past that website.

p.s. you can go ahead and hit that reputation on me one more step down. I really don't care. Red looks nice anyway. But it is a shame you forgot where you once started tho. I bet no one ever helped you

This post has been edited by teamsilvamma: 11 January 2013 - 10:38 AM

Was This Post Helpful? 0

#8 Anthonidas

D.I.C Head

Reputation: 29

Posts: 192
Joined: 25-April 11

Re: Animate Fade In (JQuery)

Posted 11 January 2013 - 06:20 PM

lol you are a poor guy/girl... i just remark that there is a BIG difference between helping someone to find a solution and giving him/her complete code! you did not ask for help... no one in this forum will give you the working script... remember that.

if you feel better giving me that negative vote, ok... i don't have any problem with it. and i am not interested in giving you bad votes, cause you are voting down yourself every time you post something stupid.

good luck

Was This Post Helpful? 0

#9 teamsilvamma

D.I.C Head

Reputation: -2

Posts: 144
Joined: 17-January 12

Re: Animate Fade In (JQuery)

Posted 11 January 2013 - 06:35 PM

Anthonidas, on 11 January 2013 - 08:20 PM, said:

If you new who I am and what I do for a living you would've thought about it twice before calling me stupid. But this is the internet. I guess you can do this cause I can't see you

Was This Post Helpful? 0

#10 snypeNET

New D.I.C Head

Reputation: 1

Posts: 12
Joined: 06-October 12

Re: Animate Fade In (JQuery)

Posted 12 January 2013 - 11:27 AM

teamsilvamma, on 11 January 2013 - 08:18 AM, said:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<title>HBGMMA</title>
    
    <meta name="description" content=" "/>
    <meta name="keywords" content=" "/>
    <meta name="author" content="LOTUS Marketing Solutions"/>
    <meta http-equiv="Content-Language" content="en"/>
    <meta name="revisit-after" content="7 days"/>
    <meta name="robots" content="index, follow"/>
    <meta name="Rating" content="General"/>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	
	<link rel="stylesheet" href="css/style.css" type="text/css"/>

            <!--[if IE 6]>
		                <link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" />
	        <![endif]-->
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.jcarousel.js"></script>
    <script type="text/javascript" src="js/jquery-func.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

</head>
<body>
	<div id="background">
		<div id="header">
			<div>
                <div>
					<a href="index.html" class="logo"><img src="images/HBGMMA.png" alt=""/></a>
					<ul>
						<li class="selected">
							<a href="index.html" id="menu1">welcome</a>
						</li>
						<li>
							<a href="programs.html" id="menu2">programs</a>
						</li>
						<li>
							<a href="schedules.html" id="menu3">schedules</a>
						</li>
						<li>
							<a href="about.html" id="menu4">about us</a>
						</li>
						<li>
							<a href="contact.html" id="menu5">contact us</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div id="body">
			<div>
                
				<div> 
					<div class="featured">
						<img src="images/featuredlogo2.png" alt=""/>                        
					<div class="animated">
                        <img id="logo" src="images/HBGMMALOGO.png" alt="" />
                    
                            <script type="text/javascript">
                                $('#animated').ready(function () {
                                    $('#logo').fadeIn('slow', function () {
                                        //$("animated").fadeIn(500);
                                    });
                                    //return false;
                                });
                            </script>
                    </div>
                    </div>
                    
					<div class="section">
						<div>
							<h3>Welcome to Harrisburg MMA</h3>
							<div>
								<p>
									At Harrisburg MMA, we have a full staff trained to meet your athletic needs whatever they may be. Whether you are interested in competing in 
                                    combat sports, learning self-defense, improving your martial art discipline, or simply getting in the best shape of your life; we can accomodate
                                     you and we are extremely flexible. <a href="programs.html" class="more" style="float:right">Find Out More</a>
								</p>
							</div>
						</div>
						<div>
							<h3>Combatives</h3>
							<div>
								<a href="programs.html" class="figure"><img src="images/mma4.jpeg" alt="" width="176px" height="130px"/></a>
								<span><a href="programs.html">MMA, BJJ, Boxing, Muay Thai, and more</a></span>
							</div>
						</div>
						<div>
							<h3>Non-Combatives</h3>
							<div>
								<a href="programs.html" class="figure"><img src="images/workout.jpg" alt="" width="176px" height="130px"/></a>
								<span><a href="programs.html">Self-Defense, Weight-Loss, Children, and more</a></span>
							</div>
						</div>
					</div>
				</div>

                
			</div>
		</div>
		<div id="footer">
			<div>
            <table>
				<tr>
                    <td class="facebook">
                        <a href="http://www.facebook.com/hbg.mma.5?fref=ts">Follow us on </a>
                    </td>
                </tr>
            </table>   
            <span>345 Carlisle St. 4th Floor. Harrisburg, PA 17111 - 717 810 9904 - hbgmma@yahoo.com</span>
                <br /><br />
	        <p>@ copyright 2012. all rights reserved. Website created by <a href="http://www.lotusmarketingsolutions.com">LOTUS Marketing Solutions</a></p>
			</div>
		</div>
	</div>
</body>
</html>

I included the entire css just in case you want to run it in your comps, although you don't have the pics but here it is anyway

thanks

Your code:

 <script type="text/javascript">
                                $('#animated').ready(function () {
                                    $('#logo').fadeIn('slow', function () {
                                        //$("animated").fadeIn(500);
                                    });
                                    //return false;
                                });
                            </script>

could probably be replaced with a load event instead of the ready event. And I would place the load code inside a document ready event to make sure it runs because I don't believe it will fire otherwise.

Also you set animated as a class and the selector of a class is a period '.' not '#'

# = id
. = class

Therefore you would have:

$(document).ready(function(){
$('.animated').load(function () {
    $('#logo').fadeIn('slow', function () {});
});
});

In the header of your webpage after you include the jQuery library.

Also you don't need both libraries. I would replace

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

with

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

Therefore you are pulling down the latest and greatest and you are including the library before the plugins.

Does that help at all?

Was This Post Helpful? 1

#11 teamsilvamma

D.I.C Head

Reputation: -2

Posts: 144
Joined: 17-January 12

Re: Animate Fade In (JQuery)

Posted 12 January 2013 - 11:53 AM

snypeNET, on 12 January 2013 - 01:27 PM, said:

teamsilvamma, on 11 January 2013 - 08:18 AM, said:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<title>HBGMMA</title>
    
    <meta name="description" content=" "/>
    <meta name="keywords" content=" "/>
    <meta name="author" content="LOTUS Marketing Solutions"/>
    <meta http-equiv="Content-Language" content="en"/>
    <meta name="revisit-after" content="7 days"/>
    <meta name="robots" content="index, follow"/>
    <meta name="Rating" content="General"/>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	
	<link rel="stylesheet" href="css/style.css" type="text/css"/>

            <!--[if IE 6]>
		                <link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" />
	        <![endif]-->
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.jcarousel.js"></script>
    <script type="text/javascript" src="js/jquery-func.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

</head>
<body>
	<div id="background">
		<div id="header">
			<div>
                <div>
					<a href="index.html" class="logo"><img src="images/HBGMMA.png" alt=""/></a>
					<ul>
						<li class="selected">
							<a href="index.html" id="menu1">welcome</a>
						</li>
						<li>
							<a href="programs.html" id="menu2">programs</a>
						</li>
						<li>
							<a href="schedules.html" id="menu3">schedules</a>
						</li>
						<li>
							<a href="about.html" id="menu4">about us</a>
						</li>
						<li>
							<a href="contact.html" id="menu5">contact us</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div id="body">
			<div>
                
				<div> 
					<div class="featured">
						<img src="images/featuredlogo2.png" alt=""/>                        
					<div class="animated">
                        <img id="logo" src="images/HBGMMALOGO.png" alt="" />
                    
                            <script type="text/javascript">
                                $('#animated').ready(function () {
                                    $('#logo').fadeIn('slow', function () {
                                        //$("animated").fadeIn(500);
                                    });
                                    //return false;
                                });
                            </script>
                    </div>
                    </div>
                    
					<div class="section">
						<div>
							<h3>Welcome to Harrisburg MMA</h3>
							<div>
								<p>
									At Harrisburg MMA, we have a full staff trained to meet your athletic needs whatever they may be. Whether you are interested in competing in 
                                    combat sports, learning self-defense, improving your martial art discipline, or simply getting in the best shape of your life; we can accomodate
                                     you and we are extremely flexible. <a href="programs.html" class="more" style="float:right">Find Out More</a>
								</p>
							</div>
						</div>
						<div>
							<h3>Combatives</h3>
							<div>
								<a href="programs.html" class="figure"><img src="images/mma4.jpeg" alt="" width="176px" height="130px"/></a>
								<span><a href="programs.html">MMA, BJJ, Boxing, Muay Thai, and more</a></span>
							</div>
						</div>
						<div>
							<h3>Non-Combatives</h3>
							<div>
								<a href="programs.html" class="figure"><img src="images/workout.jpg" alt="" width="176px" height="130px"/></a>
								<span><a href="programs.html">Self-Defense, Weight-Loss, Children, and more</a></span>
							</div>
						</div>
					</div>
				</div>

                
			</div>
		</div>
		<div id="footer">
			<div>
            <table>
				<tr>
                    <td class="facebook">
                        <a href="http://www.facebook.com/hbg.mma.5?fref=ts">Follow us on </a>
                    </td>
                </tr>
            </table>   
            <span>345 Carlisle St. 4th Floor. Harrisburg, PA 17111 - 717 810 9904 - hbgmma@yahoo.com</span>
                <br /><br />
	        <p>@ copyright 2012. all rights reserved. Website created by <a href="http://www.lotusmarketingsolutions.com">LOTUS Marketing Solutions</a></p>
			</div>
		</div>
	</div>
</body>
</html>

I included the entire css just in case you want to run it in your comps, although you don't have the pics but here it is anyway

thanks

Your code:

 <script type="text/javascript">
                                $('#animated').ready(function () {
                                    $('#logo').fadeIn('slow', function () {
                                        //$("animated").fadeIn(500);
                                    });
                                    //return false;
                                });
                            </script>

$(document).ready(function(){
$('.animated').load(function () {
    $('#logo').fadeIn('slow', function () {});
});
});

In the header of your webpage after you include the jQuery library.

Also you don't need both libraries. I would replace

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

with

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

Therefore you are pulling down the latest and greatest and you are including the library before the plugins.

Does that help at all?

Thanks man. I actually spent more time again on it this morning and figured out a lot if the stuff and got it working. I'm now working on making it even more animated with different layers doing different stuff. But I do thank you for your time and help.

Was This Post Helpful? 0

#12 snypeNET

New D.I.C Head

Reputation: 1

Posts: 12
Joined: 06-October 12

Re: Animate Fade In (JQuery)

Posted 12 January 2013 - 01:09 PM

No problem. I'm glad to hear you figured it out. Javascript (jQuery) can be irritating at times when you spend hours and get no where. I often have to take a break and get a fresh look at the code. Usually I misspelled an id or something stupid like that. If you need any help in the future let me know.

Was This Post Helpful? 0

#13 teamsilvamma

D.I.C Head

Reputation: -2

Posts: 144
Joined: 17-January 12

Re: Animate Fade In (JQuery)

Posted 12 January 2013 - 01:26 PM

snypeNET, on 12 January 2013 - 03:09 PM, said:

Thanks. I'm really good html, css, asp, Ajax, and more but jQuery is my new focus. It all comes easy with some little guidance but you're right, sometimes just a little semicolon can throw you around.

It just too bad that here, in a forum designed to learn, there are so many people showing off and basically saying "I know my stuff but I'm not sharing"

They shouldn't be here. They should be in a contest forum.

Ps. I don't think the guy above really knows how to explain things either. He was telling me I needed a function. I was positive when I told him that the function that makes the animation work is included in the library or plugin.

But oh well.

Anyway, I'm sure I'll get lost again so I'll take your offer soon. Thanks again. And if you are ever in PA or Brazil, msg me, I'll give you free MMA lessons ;-)

Was This Post Helpful? 0

#14 snypeNET

New D.I.C Head

Reputation: 1

Posts: 12
Joined: 06-October 12

Re: Animate Fade In (JQuery)

Posted 12 January 2013 - 05:20 PM

teamsilvamma, on 12 January 2013 - 01:26 PM, said:

snypeNET, on 12 January 2013 - 03:09 PM, said:

I think he just didn't see that you did have the ready event in your code and assumed you didn't know you needed which lead to the insuts and stuff.

I am pretty good with html,css, javascript/jQuery, c#, c/c++, java, asp.net, vb.net and I am starting to get into classic asp and php. So if need any help in the other languages let me know as well.

Yea I will msg you if I'm ever in the area.

Was This Post Helpful? 0

Page 1 of 1

13 Replies - 1227 Views - Last Post: 12 January 2013 - 05:20 PM

Animate Fade In (JQuery)

Replies To: Animate Fade In (JQuery)

Re: Animate Fade In (JQuery)

Re: Animate Fade In (JQuery)

Re: Animate Fade In (JQuery)

Re: Animate Fade In (JQuery)

Re: Animate Fade In (JQuery)

Re: Animate Fade In (JQuery)

Re: Animate Fade In (JQuery)

Re: Animate Fade In (JQuery)

Re: Animate Fade In (JQuery)

Re: Animate Fade In (JQuery)

Re: Animate Fade In (JQuery)

Re: Animate Fade In (JQuery)

Re: Animate Fade In (JQuery)

Related Topicsbeta

Follow & Share

Give It A Try!

Programming

Web Development

Reference Sheets

Bye Bye Ads

Monthly Drawing

Related Topics^beta