Solved

jQuery Close Slide up

Posted on 2013-06-24
6
362 Views
Last Modified: 2013-06-24
Hello,

Below is my code and I can not make it slide up when I click the #close image.

Can you please help me out.

Thanks,
Matt

<script type="text/javascript">
	$(document).ready(function(){
		$('.hidden').slideDown(450,function(){
			$('.rifle').animate({left:'0px'},250,function(){
				$('.name').animate({left:'0px'},150,function(){
					$('.instock').animate({left:'0px'},150,function(){
						$('.arrows').animate({left:'0px'},150,function(){
							$('.buynow').animate({left:'0px'},150,function(){
								$('.close').animate({left:'0px'},150,function(){
								});
							});
						});
					});
				});
			});
		});
	 });
	$('#close').click(function() {
		$('.hidden').slideUp(100, function() {
			// Animation complete.
		});
	});
</script>

Open in new window

0
Comment
Question by:movieprodw
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39272420
Where is the HTML part of your code.
0
 
LVL 1

Author Comment

by:movieprodw
ID: 39272437
<!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>Banner Test</title>
<style type="text/css">
<!--
.hidden{
	width:950px;
	height:120px;
	display:none;
	margin:0px auto;
	background-color: #333;
	position:relative;
	background-image: url(media/bannerflyin/banner-flyin-background.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.rifle {
      position:absolute;
      left:-2000px;
      width:950px;
      height:120px;
}
.name {
      position:absolute;
      left:-2000px;
      width:950px;
      height:120px;
}
.instock {
      position:absolute;
      right:-2000px;
      width:950px;
      height:120px;
}
.arrows {
      position:absolute;
      left:-2000px;
      width:950px;
      height:120px;
}
.buynow {
      position:absolute;
      left:2000px;
      width:950px;
      height:120px;
}
.close {
	position:absolute;
	left:2000px;
	margin-left:895px;
	cursor:pointer
}
-->
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.hidden').slideDown(450,function(){
			$('.rifle').animate({left:'0px'},250,function(){
				$('.name').animate({left:'0px'},150,function(){
					$('.instock').animate({left:'0px'},150,function(){
						$('.arrows').animate({left:'0px'},150,function(){
							$('.buynow').animate({left:'0px'},150,function(){
								$('.close').animate({left:'0px'},150,function(){
								});
							});
						});
					});
				});
			});
		});
	 });
	$('#close').click(function() {
		$('.hidden').slideUp(100, function() {
			// Animation complete.
		});
	});
</script>

</head>

<body>
<br />
<br />
<div class="hidden">
<img class="instock" src="media/bannerflyin/banner-flyin-instock.png" width="950" height="120" alt="In Stock Now"  />
<img class="rifle" src="media/bannerflyin/banner-flyin-v5300-rifle.png" width="950" height="120" alt="rifle" />
<img class="name" src="media/bannerflyin/banner-flyin-v5300-logo.png" width="950" height="120" alt="rifle name" />
<img class="buynow" src="media/bannerflyin/banner-flyin-buynow.png" width="950" height="120" alt="Buy Now" />
<img class="arrows" src="media/bannerflyin/banner-flyin-arrows.png" width="950" height="120" alt="Arrows" />
<img class="close" id="close" src="media/bannerflyin/banner-flyin-close.png" width="51" height="44" alt="close" />
</div>
</body>
</html>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39272461
Code as is works fine for me.
http://jsfiddle.net/aTRg7/7/
0
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 
LVL 1

Author Comment

by:movieprodw
ID: 39272483
Weird, try it here, same code.

http://tinyurl.com/mmo76wf
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39272537
Place the close function inside the document.ready, you are trying to initiate it before the element has been created.
0
 
LVL 1

Author Closing Comment

by:movieprodw
ID: 39272565
Perfect!
0

Featured Post

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question