Slide up down slow
Description
The following code shows how to slide up down slow.
Example
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
a.test {<!--from ww w . jav a 2 s. c o m-->
font-weight: bold;
color: red;
}
</style>
<script type="text/javascript">
$(document).ready(
function() {
$("input.buttonA").click(
function() {
$("div.contentToChange").find(
"p.firstparagraph:hidden")
.slideDown("slow");
});
$("input.buttonB")
.click(
function() {
$("div.contentToChange").find(
"p.firstparagraph:visible")
.slideUp("slow");
});
});
</script>
</head>
<body>
<input type="button" value="Slide In" class="buttonA" />
<input type="button" value="Slide Out" class="buttonB" />
<div style="background: #eee;" class="contentToChange">
<h2>Header 2</h2>
<p class="firstparagraph">
Lorem ipsum <em>dolor</em> sit amet, consectetuer <em>adipiscing</em>
elit, sed diam nonummy nibh euismod <em>tincidunt</em> ut laoreet
dolore magna aliquam erat <strong>volutpat</strong>. Ut wisi enim ad
minim <em>veniam</em>, quis nostrud exerci <strong>tation</strong>
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.
</p>
<p class="secondparagraph">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
<strong>molestie</strong> consequat, vel illum <strong>dolore</strong>
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
consectetuer <strong>adipiscing</strong> elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p class="thirdparagraph">
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea <em>commodo</em> consequat.
Duis autem vel eum iriure dolor in hendrerit in <em>vulputate</em>
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te <strong>feugait</strong>
nulla facilisi.
</p>
<p class="fourthparagraph">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, <strong>quis</strong> nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
<p class="fifthparagraph">
Lorem ipsum <em>dolor</em> sit amet, consectetuer <em>adipiscing</em>
elit, sed diam nonummy nibh euismod <em>tincidunt</em> ut laoreet
dolore magna aliquam erat <strong>volutpat</strong>. Ut wisi enim ad
minim <em>veniam</em>, quis nostrud exerci <strong>tation</strong>
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.
</p>
<p class="sixthparagraph">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
<strong>molestie</strong> consequat, vel illum <strong>dolore</strong>
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
consectetuer <strong>adipiscing</strong> elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</body>
</html>