Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Calling a Function Repeatedly with setInterval() Method</title> <style> img{ display: none; } </style> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> var myVar; function showImage(){ $("img").fadeIn(750).fadeOut(750); myVar = setTimeout(showImage, 2000); } function stopFunction(){ clearTimeout(myVar); // stop the timer } $(document).ready(function(){ showImage(); }); </script> </head> <body> <button onclick="stopFunction()">Stop Image Transition</button> <p> <img src="/examples/images/sky.jpg" alt="Cloudy Sky"> </p> </body> </html>
