Solved

jquery slide div from off screen

Posted on 2013-06-24
2
1,458 Views
Last Modified: 2013-06-24
Hello,

I want to have the fromleft to fly/slide in from off the screen to the middle of the div after the dropdown animation is complete and the fromright to fly/slide in from the right to the middle of the div after the from left is in place

I have been tinkering with it for days but have not had any luck.

Thanks for any help,
Matt

<!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>
<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(200);
 });
</script>
<style type="text/css">
<!--
.hidden{
	width:950px;
	height:120px;
	display:none;
	margin:0px auto;
	background-color: #333;
}
#fromright {
	padding-left:140px
}
#fromleft {
}
-->
</style>
</head>

<body>
<br />
<br />
<div class="hidden">
<div class="fromleft">Fly in from left</div>
<div class="fromright">Fly in from right</div>
</div>
</body>
</html>

Open in new window

0
Comment
Question by:movieprodw
2 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 39272201
 $(document).ready(function(){
    $('.hidden').slideDown(200,function(){
		$('.fromleft').animate({left:'400px'},2000,function(){
			$('.fromright').animate({right:'400px'},2000);
		});
	});
 });

Open in new window


<style type="text/css">
<!--
.hidden{
      width:950px;
      height:120px;
      display:none;
      margin:0px auto;
      background-color: #333;
      position:relative;
}
.fromleft {
      position:absolute;
      left:-1000px;
      width:150px;
      height:120px;
      background-color:#def      
}
.fromright {
      position:absolute;
      right:-1000px;
      width:150px;
      height:120px;
      background-color:#fed      
}
-->
</style>
0
 
LVL 1

Author Closing Comment

by:movieprodw
ID: 39272231
Perfect!
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

910 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now