Databases
StackOverflow2013
Postsdbo
POHow to fade loop gallery background images
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to fade loop gallery background images
    text
    copied!<p>I wish to rotate a background image of a div which I believe precludes me from using the excellant jQuery Cycle Plugin.</p> <p>The code below is what I have so far but it does not behave as I would like, which is:</p> <ul> <li>Fade out first image</li> <li>Swap image with second image while not showing an image - (fails this Fade in second image)</li> <li>And repeat into infinity ...and beyond.</li> </ul> <p> <pre><code>&lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="/css/normalize.css"&gt; &lt;link rel="stylesheet" type="text/css" href="/css/result-light.css"&gt; &lt;style type='text/css'&gt; #mydiv { width: 100%; height: 365px; margin-left: auto; margin-right: auto; position: relative; display: block; background: url(HP_jQuery1.jpg) center top no-repeat; } &lt;/style&gt; &lt;script type='text/javascript'&gt; $(window).load(function(){ var firstTime = true; var arr = ["url(HP_jQuery2.jpg)", "url(HP_jQuery3.jpg)"]; (function recurse(counter) { var bgImage = arr[counter]; if (firstTime == false) { $("#mydiv").fadeOut("slow"); $('#mydiv').css('background-image', bgImage); $("#mydiv").fadeIn("slow"); } else { firstTime = false; } delete arr[counter]; arr.push(bgImage); setTimeout(function() { recurse(counter + 1); }, 3600); })(0); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="mydiv"&gt;&amp;nbsp;&lt;/div&gt; &lt;/body&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload