jQuery: fadeIn() and fadeOut() before unload

Question

I'm new to jQuery and been trying to figure this out.

I have a course assignment where I have to make an event handler for a page unload in JQuery that when fired will fadeout(3000) a div and then the text 'Thank you' will fadein(3000). I'm assuming what the instructor means is to have a button or link that leaves the window and goes to another page but first executes the fadeIn/FadeOut.

I'm not having any issues w/ the FadeIn/FadeOut option. I'm having the issue w/ the unload ... how do I get it to go to a new page but first execute a fadeOut(2000)/fadeIn(2000)?

I'm having a problem figuring this out. As far as I understand unload is compatable only w/ $(window), so the only that I can really do is have an alert?

This is what I have so far, but this is not an unload, I'm trying to figure out how to have this effect work once you are unloading. Is that even possible?

JQ

$(function () {
    $(".btn1").click(function () {
        $("#fadeout").fadeOut(3000);
        $("#thankyou").fadeIn(3000);
    });

});

CSS

btn1 {
display:none;}

HTML

<button id="btn1" class="btn1">CLICK</button>

Would I add a delay to close the window and link something else at the same time when you hit the button?

MBJH MBJH · Accepted Answer · 2018-02-04T00:38:10

$(".btn1").click(function() {
  $("#fadeout").fadeOut(3000, function() {
    $("#thankyou").fadeIn(3000, function() {
      location="url";
    });
  });
});

#thankyou {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='fadeout'>Hello World!</div>
<div id='thankyou'>Thank you!</div>
<button class='btn1'>Click</button>

jQuery: fadeIn() and fadeOut() before unload

1 Answers