Solved

animation div

Posted on 2008-10-27
4
1,022 Views
Last Modified: 2010-04-21
i have 2 divs one of them hidden. when i click on the toggle button i want the first div to slowly hide and the second one to show up slowly in an animated way. pl help.
<html>
 <head>
 </head>
 <body>
  <div id="1" style="width:500px;height:100px;background-color:blue">
  </div>
  <div style="display:none" id="2" style="width:500px;height:100px;background-color:yellow">
  </div>
  <input type="button" value="toggle" />
 </body>
</html>

Open in new window

0
Comment
Question by:vidhubala
  • 2
  • 2
4 Comments
 
LVL 16

Expert Comment

by:sh0e
ID: 22818046

<html>
 <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
 
$(document).ready(function(){ //DOM Ready
    $('#toggle').click(function(){ //id=toggle onclick
            $('#1').fadeOut("slow",function(){ //id=1 fadeout, callback anonymous function
                $('#2').fadeIn("slow"); //id=2 fadein
            });
    });
});
</script>
 </head>
 <body>
  <div id="1" style="width:500px;height:100px;background-color:blue">
  </div>
  <!-- fixed your style property error -->
  <div id="2" style="width:500px;height:100px;background-color:yellow; display:none;">
  </div>
  <input type="button" value="toggle" id="toggle" />
 </body>
</html>

Open in new window

0
 

Author Comment

by:vidhubala
ID: 22818611
looks great. one small thing.. how do i set the timer say 5000 ms etc to make it more slow?
0
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22818792

<html>
 <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
 
$(document).ready(function(){ //DOM Ready
    $('#toggle').click(function(){ //id=toggle onclick
            $('#1').fadeOut("5000",function(){ //id=1 fadeout, callback anonymous function
                $('#2').fadeIn("5000"); //id=2 fadein
            });
    });
});
</script>
 </head>
 <body>
  <div id="1" style="width:500px;height:100px;background-color:blue">
  </div>
  <!-- fixed your style property error -->
  <div id="2" style="width:500px;height:100px;background-color:yellow; display:none;">
  </div>
  <input type="button" value="toggle" id="toggle" />
 </body>
</html>

Open in new window

0
 

Author Closing Comment

by:vidhubala
ID: 31510575
great.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

860 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