Variable Visions

Articles jQuery Javascript-setInterval-with-random-content-loaded-with-AJAX-PART-2


tutorials - jQuery and Web-Development.

Javascript setInterval with random content loaded with AJAX - PART 2

Published Fri. Sep. 07, 2012


The below function was written to display six random articles by fading in and out with the addition of pausing on mouse hover

/* EVERY FIVE SECONDS THE PHP FILE WITH ARRAY WILL LOAD VIA AJAX INTO THE CONTAINER ID AFTER THE FIRST ARRAY IS FADED OUT QUICKLY AND THEN DELAY THE LOAD BY ONE SECOND AND FADE IN THE NEXT IN ONE SECOND */

 

var hoverpause = false;
   
function loadLoad() {
    if (hoverpause) return;
    jQuery('#container').fadeOut(100).load('/file.php?limit=6').delay(1000).fadeIn(1000);
}



jQuery(document).ready(function(){

    window.setInterval(function(){   
        loadLoad();
    },5000);
   
    $("#container").hover(
      function () { hoverpause = true; },
      function () { hoverpause = false; }
    );
   
   
});  


Tag(s): window.setInterval, .delay, .fadeIn, .fadeOut, hover pause



RECENT ARTICLES:

PUBLISHED ON 01.16.24arrowInteractive 3D web sites with Spline

PUBLISHED ON 06.1.23arrowBuilding a JavaScript Metronome using Open AI Chat GPT

TAGS

CATEGORIES