0

I have a button which takes to another html. But is there a way to fade out whole front page by clicking the button and take it to second page. Now I can just fade out the front page by clicking anywhere but when I click the button it reloads to the new page without the fade effect.

Below is the code related to it:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

HTML

<div id="fade">
Some content
<a href="page2.html"><button>Click me</button></a>
</div>

jQuery:

$("#fade").click(function(){
        $("#fade").fadeOut("slow");
    });

Thank you.

  • you need to use ajax to change the page without refresh or read the whole container of page2.html and put it in the div and fadeIn again – Araz Shamsaddinlouy Nov 04 '16 at 14:17
  • @Araz can you give me a working example using two different html pages please. –  Nov 04 '16 at 14:22
  • @Archer That solution uses Smoothstate.js which does use AJAX – GillesC Nov 04 '16 at 14:22
  • There is a bunch of questions like this here http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load – DaniP Nov 04 '16 at 14:23
  • Lol. That's not what I was looking for but found it and thought it was better suited. Ah well :D – Reinstate Monica Cellio Nov 04 '16 at 14:23
  • @Archer I tried using this but it doesn't have two different htmls, And I cannot change second html page to be part of the first html. It will be a lot to redo. –  Nov 04 '16 at 14:24
  • you can have a look into this jsfiddle.. https://jsfiddle.net/josangel555/y2m2ygvr/1/ – Jos Nov 04 '16 at 14:25
  • Thank you but are the not div's on the same page ? @redflar3, that is something I am already achieving, I was looking for two different html pages like first page, index.html to page2.html, here the page reloads and it doesn't allow the fade out to happen. –  Nov 04 '16 at 14:30
  • https://jsfiddle.net/0y50khxk maybe this would help a bit – Pritish Vaidya Nov 04 '16 at 14:32
  • @pritishvaidya no I tried this, but you can see when button is clicked it would directly reload to the second page without any effect. –  Nov 04 '16 at 14:36

0 Answers0