{"id":510,"date":"2013-06-11T22:27:16","date_gmt":"2013-06-11T22:27:16","guid":{"rendered":"http:\/\/tregner.com\/flare-blog\/?p=510"},"modified":"2013-06-11T22:27:16","modified_gmt":"2013-06-11T22:27:16","slug":"embellishing-the-jquery-slides-with-fade-effects","status":"publish","type":"post","link":"https:\/\/tregner.com\/flare-blog\/embellishing-the-jquery-slides-with-fade-effects\/","title":{"rendered":"Embellishing the jQuery Slides with Fade Effects"},"content":{"rendered":"

If you saw yesterday\u2019s post<\/a>, you may have asked, why include the function that does nothing in the parameters for the calls to slideUp() and slideDown()? For yesterday\u2019s 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()<\/a> and slideDown()<\/a> documentation, the duration is 600 milliseconds.<\/p>\n

The second parameter is a deferred callback<\/a> function. When included in the parameters, this \u2018complete\u2019 function is called at the end. For example other jQuery effects<\/a> can be used to embellish the animation when the slide animation is completed.<\/p>\n

By the way, slideToggle()<\/a> would accomplish yesterday\u2019s example more efficiently. But if we want to differentiate the slideUp() and slideDown() animations, the if..else comes in handy.<\/p>\n

Here is yesterday\u2019s example embellished with different animations after the completion of slideUp() and slideDown(). After slideUp(), the body of the topic will fade out with fadeOut()<\/a> and back in with fadeIn()<\/a>. After slideDown(), the sliding text will fade out and back in:<\/p>\n

function slideContent(id) {\n    if ($('#' + id).css('display') == 'none') {\n        $('#' + id).slideDown('slow', function () {\n            $(this).fadeOut();\n            $(this).fadeIn();\n        });\n    }\n    else {\n        $('#' + id).slideUp('slow', function () {\n            $('body').fadeOut();\n            $('body').fadeIn();\n        });\n    }\n}<\/pre>\n
Here is the behavior:<\/p>\n
fade-in-fade-out<\/a><\/p>\n
And the new version of the topic:<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<html xmlns:MadCap=\"http:\/\/www.madcapsoftware.com\/Schemas\/MadCap.xsd\" MadCap:lastBlockDepth=\"2\" MadCap:lastHeight=\"155\" MadCap:lastWidth=\"811\">\n    <head>\n        <link href=\"Resources\/Stylesheets\/Styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n    <\/head>\n    <body>\n        <h1>Topic Title<\/h1>\n        <p>\n            <script type=\"text\/javascript\">\/*<![CDATA[*\/function slideContent(id) {\n    if ($('#' + id).css('display') == 'none') {\n        $('#' + id).slideDown('slow', function () {\n            $(this).fadeOut();\n            $(this).fadeIn();\n        });\n    }\n    else {\n        $('#' + id).slideUp('slow', function () {\n            $('body').fadeOut();\n            $('body').fadeIn();\n        });\n    }\n}\/*]]>*\/<\/script>\n        <\/p>\n        <p onclick=\"slideContent('show-hide')\">Expand\/Collapse<\/p>\n        <p id=\"show-hide\" class=\"space\">Delete this text and replace it with your own content.<\/p>\n    <\/body>\n<\/html><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
If you saw yesterday\u2019s post, you may have asked, why include the function that does nothing in the parameters for the calls to slideUp() and slideDown()? For yesterday\u2019s 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()… Continue reading Embellishing the jQuery Slides with Fade Effects<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/posts\/510"}],"collection":[{"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/comments?post=510"}],"version-history":[{"count":5,"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/posts\/510\/revisions"}],"predecessor-version":[{"id":516,"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/posts\/510\/revisions\/516"}],"wp:attachment":[{"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/media?parent=510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/categories?post=510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/tags?post=510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}