Edit Question - KnowledgeHub

Title Body

I wish to rotate a background image of a div which I believe precludes me from using the excellant jQuery Cycle Plugin. The code below is what I have so far but it does not behave as I would like, which is: Fade out first image Swap image with second image while not showing an image - (fails this Fade in second image) And repeat into infinity ...and beyond. <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="/css/normalize.css"> <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <style type='text/css'> #mydiv { width: 100%; height: 365px; margin-left: auto; margin-right: auto; position: relative; display: block; background: url(HP_jQuery1.jpg) center top no-repeat; } </style> <script type='text/javascript'> $(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); }); </script> </head> <body> <div id="mydiv">&nbsp;</div> </body>

Tags (comma-separated) Cancel