jQuery slideUp() method animates and changes the height of the matched element, similar to rolling up your window shades. Once the height reaches 0, the element display style is set none. You can also provide the following options
- duration
- A string or number determining how long the animation will run.
- easing
- A string indicating which easing function to use for the transition.
- callback
- A function to call once the animation is complete.
The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If the duration parameter is omitted, the default duration of 400 milliseconds is used. Here is how to use ...
|
<html>
<head>
<title>jQuery slideUp() example</title>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
.someText{
margin-top:16px;
width:500px;
height:250px;
background-color:#8b8378;
color:#ffffff;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
type="text/javascript"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myButton").click(function () {
$('#section').slideUp(2000, 'linear', function() {
//callback function after animation finished
$("#myButton").attr('value','slideUp() is now Complete');
});
});
});
</script>
</head>
<body>
<fieldset>
<legend>jQuery page animation using slideUp()</legend>
<div>
<input id="myButton" type="button"
value="Click here to see slideUp()" />
</div>
<div id="section" class="someText">
Just some TEXT for JQuery page Animation ...
</div>
</fieldset>
</body>
</html>
References
No comments:
Post a Comment
NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.