Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Jquery

Fade Out On Anchor Click And Fade In Href

Post a Comment
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 bot

Solution 1:

  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><scripttype="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><divclass="myBtn"id="index">index</div><divclass="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.

Solution 2:

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-2013http://reciperehab.com/blog/post/the-6-best-salads-for-spring

*disclaimer, I did the second one...

Solution 3:

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:

<scripttype="text/javascript">window.onload=function(){fadeIn('body')};
</script><divid="body">
    Content <br /><br /><aonClick="fadeOut('body')"style="cursor:pointer">Click Me to Fade Out</a></div>

Javascript:

//fadeEffects

var fade_in_from = 0;
var fade_out_from = 10;

functionfadeIn(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;
        returnfalse;
    }
    var loopTimer = setTimeout('fadeIn(\''+element+'\')',100);
}
functionfadeOut(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;
        returnfalse;
    }
    var loopTimer = setTimeout('fadeOut(\''+element+'\')',100);
    window.location.href = "link.html";
}

Solution 4:

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

Post a Comment for "Fade Out On Anchor Click And Fade In Href"