CODEWITHSUNDEEP
javascriptjqueryhtml
supersize
supersize

Reputation: 14783

fade out on anchor click and fade in href

I would like to know if it is possible to make fadings between two HTML-Documents. I have a few HTML-Pages but let's make an example with two of them.

index.html, jobs.html

On both I have a menu with <a> buttons. What I want to do is:

I click on <a href="jobs.html" id="jobs">Jobs</a> and index.html (which I am currently on) fades out and jobs.html fades in. Something like fading between divs but with a whole HTML document.

Any helps is much appreciated.

Upvotes: 0

Views: 5660

Answers (4)

Stephan Conzen
Stephan Conzen

Reputation: 56

  1. Hide the body using css.
  2. Fade in the body
  3. Click a button and grab its ID
  4. Fade out the body
  5. Navigate to the new url
<!DOCTYPE html>
<html>
<head>
    <style>
        body{
            display: none;
        }
        .myBtn{
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <script>
        $(function(){
            $('body').fadeIn();
            $('.myBtn').click(function(){
                url = $(this).attr('id') + '.html';
                $('body').fadeOut(function(){
                    window.location = url;
                });     
            });
        });
    </script>
</head>
<body>
    <h1>index.html</h1>
    <div class="myBtn" id="index">index</div>
    <div class="myBtn" id="jobs">jobs</div>
</body>
</html>

http://jsfiddle.net/Dp4Hy/

PS. obviously the fiddle won't work, as you're trying to navigate to a new page, but you can still see the fade in at the beginning, and fade out when you click a button. Just need this script included for all pages to use.

Upvotes: 4

Jacques
Jacques

Reputation: 3774

Create your anchor tag and set a javascript onclick event. Call your fadeOut() function (which i've pasted below) You'll want it to fade out when you click, and when the next page loads, you'll want it to fade in:

jsfiddle: http://jsfiddle.net/HmGap/3/

HTML:

<script type="text/javascript">
window.onload=function(){fadeIn('body')};
</script>

<div id="body">
    Content <br /><br />
    <a onClick="fadeOut('body')" style="cursor:pointer">Click Me to Fade Out</a>
</div>

Javascript:

//fadeEffects

var fade_in_from = 0;
var fade_out_from = 10;

function fadeIn(element){
    var target = document.getElementById(element);
    target.style.display = "block";
    var newSetting = fade_in_from / 10;
    target.style.opacity = newSetting;
    // opacity ranges from 0 to 1
    fade_in_from++;
    if(fade_in_from == 10){
        target.style.opacity = 1;
        clearTimeout(loopTimer);
        fade_in_from = 0;
        return false;
    }
    var loopTimer = setTimeout('fadeIn(\''+element+'\')',100);
}
function fadeOut(element){
    var target = document.getElementById(element);
    var newSetting = fade_out_from / 10;
    target.style.opacity = newSetting;
    fade_out_from--;
    if(fade_out_from == 0){
        target.style.opacity = 0;
        target.style.display = "none";
        clearTimeout(loopTimer);
        fade_out_from = 10;
        return false;
    }
    var loopTimer = setTimeout('fadeOut(\''+element+'\')',100);
    window.location.href = "link.html";
}

Upvotes: 1

Brad
Brad

Reputation: 6332

Bottom line, this is not possible without some kind of pre-loading and interaction with a server side component

I would personally recommend PJAX. http://pjax.heroku.com/ It allows you not only catch an event and load a document based on the event, it updates the browser state, url, title, the back button works, etc.

example sites that use it to accomplish similiar behavior http://bleacherreport.com/articles/1716958-the-top-10-fantasy-qbs-for-2013 http://reciperehab.com/blog/post/the-6-best-salads-for-spring

*disclaimer, I did the second one...

Upvotes: 1

Jefferson Henrique C. Soares
Jefferson Henrique C. Soares

Reputation: 968

Yes, it's possible, you can append the html in DIV (like you know), or you can use iframes, to manager the fade of the iframe tag

Upvotes: 0

Related Questions