Fade page container, then load

Very basic fadeTo then load page.

by mark47

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<body>
    
<div class="container">
    
    <div class="row" style="margin: 10px">
        <div class="span12">
            <h1>Patient-Based Measures Report Prototypes</h1>
            <p>Various mock-ups of clinician reports for PBM focus groups:</p>

            <ul>
                <li><a href="index-ver2.html">Ver 2 - Simplified Portrait Form - April 15</a><br />
                    Revisions to previous version - added line separation for high-risk behavior rows, cleaned up some spacing issues. Revised "print stylesheet" to better accommodate printing. Now looks consistent on all printers (well at least "most" -- needs further testing).</li>
                <li><a href="index-ver2-minimal.html">Ver 2 - Minimal - April 15</a><br />
                    Similar to main Ver 2, but limited to a single assessment. Done to give a more minimal option for comparison.</li>
                <li><a href="index-ver1.html">Ver 1 - Simplified Portrait Form (based on UW feedback) - March 22</a><br />
                    Much simpler version of the form, based on feedback from UW clinicains. Does not include adherence intent or sparklines. Symptoms shown for most recent appointment and limited to "Bothers a lot" and "Bothers some". Web-based, needs some more work on layout when printed.</li>
                <li><a href="2012-prototype-ver1.pdf">2012 Prototype - Ver1 (pdf)</a><br />
                    Portrait layout of initial prototype used during 2012 interviews. Includes three time points and sparklines showing the values for those time periods. Lists symptoms for all three visits.</li>
                <li><a href="2012-prototype-ver2.pdf">2012 Prototype - Ver2 (pdf)</a><br />
                    Landscape layout of initial prototype used during 2012 interviews. Did not include sparklines and only...

JavaScript

$("#sendMe").on("click", function(){
    var linkIt = $(this).attr("href");
    // can replace container with any element of the page that should "fade"
    // fadeTo variable - "slow" is how long it takes, 0.4 represents what it will
    // fade to (0.0 would be completely transparent
    // Can adjust delay
    $(".container").fadeTo("slow", 0.4).delay(1000).queue(function(next){
        window.location.href = linkIt;
    });
    return false; 
});