If you saw yesterday’s post, you may have asked, why include the function that does nothing in the parameters for the calls to slideUp() and slideDown()? For yesterday’s example, there is no good reason. The functions will work with no parameters. The first parameter passed is duration. Slow is a nice speed. According to slideUp() and slideDown() documentation, the duration is 600 milliseconds.
The second parameter is a deferred callback function. When included in the parameters, this ‘complete’ function is called at the end. For example other jQuery effects can be used to embellish the animation when the slide animation is completed.
By the way, slideToggle() would accomplish yesterday’s example more efficiently. But if we want to differentiate the slideUp() and slideDown() animations, the if..else comes in handy.
Here is yesterday’s example embellished with different animations after the completion of slideUp() and slideDown(). After slideUp(), the body of the topic will fade out with fadeOut() and back in with fadeIn(). After slideDown(), the sliding text will fade out and back in:
function slideContent(id) {
if ($('#' + id).css('display') == 'none') {
$('#' + id).slideDown('slow', function () {
$(this).fadeOut();
$(this).fadeIn();
});
}
else {
$('#' + id).slideUp('slow', function () {
$('body').fadeOut();
$('body').fadeIn();
});
}
}
Here is the behavior:
And the new version of the topic:
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="2" MadCap:lastHeight="155" MadCap:lastWidth="811">
<head>
<link href="Resources/Stylesheets/Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Topic Title</h1>
<p>
<script type="text/javascript">/*<![CDATA[*/function slideContent(id) {
if ($('#' + id).css('display') == 'none') {
$('#' + id).slideDown('slow', function () {
$(this).fadeOut();
$(this).fadeIn();
});
}
else {
$('#' + id).slideUp('slow', function () {
$('body').fadeOut();
$('body').fadeIn();
});
}
}/*]]>*/</script>
</p>
<p onclick="slideContent('show-hide')">Expand/Collapse</p>
<p id="show-hide" class="space">Delete this text and replace it with your own content.</p>
</body>
</html>