jquery redirect on click or after 10 seconds

Question

I have a spash screen on a website that has a div with the ID of "splash" i'm trying to make the div fade in then if the user clicks on the div it fades out and redircts to the main site. If the user dosen't click it just fades out and redirects after 10 seconds.

The timed redirect is working but not the click function.

    <script type="text/javascript">
  $(document).ready(function() {
  $('#splash').hide();  
        $('#splash').fadeIn(1000, function() {
              $(this).delay(10000).fadeOut(1000, function() { 
               window.location = 'http://www.examle.com'; });
              $(this).click().fadeOut(1000,function() { 
               window.location = 'http://www.example.com'; });
         });
  });
</script>

Any help would be great

score 5 · Accepted Answer · edited Sep 17 '14 at 20:26

5

Try this:

$(document).ready(function() {
  $('#splash').hide();
  $('#splash').click(function(){
             $(this).fadeOut(1000,function() { 
                     window.location = 'http://www.example.com'; });
             });
  $('#splash').fadeIn(1000, function() {
           window.setTimeout ( function() {
             $('#splash').fadeOut(1000, function() { 
               window.location = 'http://www.example.com'; }) }
             , 10000);
     });
 });

Changes that I've made to the example:

I've moved setting the click handler outside the fadeOut function (better practice, IMHO) and I've changed your call to delay() to a setTimeout().

The difference is, delay() will not allow other jQuery code to be executed in the background, while setTimeout() will.

edited Sep 17 '14 at 20:26

user1466873

5
5

answered Jul 13 '10 at 03:39

Josiah

4,754
1
20
19

Thanks, the click function still doesn't work with the above code. – Brooke. Jul 13 '10 at 03:49
Sorry, the error was not what I intially thought. Try the updated code sample :) – Josiah Jul 13 '10 at 03:56
The problem is that it's not stoping `delay()` on click. So if you click you still have to wait till the delay is over. Weird. (But it looks like you discoverd that :)) – Brooke. Jul 13 '10 at 04:00
Try the updated code I posted (I edited my answer). It worked the way it was supposed to for me. Like I mentioned in my updated answer, I traded delay() which does not allow further jQuery code to execute, for setTimeout() which will. – Josiah Jul 13 '10 at 04:03
That's also not working, It's running the fadein then the fadeout without taking the timeout into effect. – Brooke. Jul 13 '10 at 04:23
Okay. This time it works, I promise :D I've wrapped the JQuery call inside a function, which is required in this case because it's a multi-call, rather than a single function call. Interesting... I learned something new :) Again, see the code I've posted in my answer. – Josiah Jul 13 '10 at 04:43
Thank you soo much! It did work this last time! Thanks for all your help I hope I wasn't too annoying ;) – Brooke. Jul 13 '10 at 04:47
You're very welcome. And not at all :) I'm happy to have been able to help. – Josiah Jul 13 '10 at 05:12

jquery redirect on click or after 10 seconds

1 Answers1

Linked