Delaying Jquery CSS Animation using mousemove

Question

I've been trying to put 10 seconds delay on this jquery css animation which is dependent on mousemove. I've tried unsuccesfully utilizing both .delay and .setInterval right before like so:

$(document).delay(10000).ready(function () 

However, they don't seem to be working for me. Its possible that I put it in the wrong place. I have listed below a the jsfiddle link with the code. If someone can help me out would be amazing.

JSFiddle: https://jsfiddle.net/oekhedr/eeh950b7/39/#&togetherjs=4Bsp9CVtlB

Thank you so much

Answer 1

You can add a (plain JavaScript) setTimeout in your mousemove event, like so:

setTimeout(function() {
  // do something here, but it will only start after 10 seconds have passed
},10000);

.delay() only works with certain jQuery effects. Here is a fiddle using your code: https://jsfiddle.net/eeh950b7/42/