ansaurus

Question

Answer 1

+5 A:

First of all, you can rewrite that code to be about 7 times smaller. use loops and stuff.

On to your problem:

I suspect it has something to do with you having an infinite loop, that, sets of a bunch of timers that fade some stuff. because you are constantly looping and creating more and more timers, you will have unpredictable results, such as some images not being used.

I suspect that you dont understand how fadeOut and fadeIn works. Those calls queue up animations, they do not block execution! So in effect you are queuing up a ton of stuff all the time, all the time.

Also, you should look into using firebug to debug

mkoryak 2009-09-03 02:45:02

Hi mkoryak: Thanks for your help. That seems very reasonable, but would there be some way to fix this? In other words, make the other fade out run once it has faded in?

PF1 2009-09-07 22:08:04

Answer 2

+2 A:

You might want to look into a jQuery plugin to get this effect; there are plenty of "slideshow"-style plugins out there. See Cycle, for example.

Greg Campbell 2009-09-03 02:52:41

My problem was more making it work in the background of the text... Can Cycle do this?

PF1 2009-09-03 03:21:08

Answer 3

+1 A:

Gonna have to side with mkoryak on this. Code is way over-complicating the issue.

This is how I would do it (this, of course, is totally untested):

var fade_time = 1000;
var wait_time = 15000;
var curr = 0;
var last = 41;
var bg = $("#background");

function do_fade() {
    curr++;
    if (curr > last) {
        curr = 1;
    }
    bg.fadeOut( fade_time, function() {
        // switch your image here. something like this
        bg.css('background-image','./images/background/image_' + curr + '.jpg');
        bg.fadeIn( fade_time );
    }
}

id = setInterval( do_fade, wait_time );

Hopefully this works for you.

Rhinosaurus 2009-10-15 09:56:46

Hi Rhinosaurus: That seems really great! It is now online at the posted link, however I am wondering if there is some way to make it just fade out the background and if it can fade into the next photo. Thanks!

PF1 2009-10-16 21:54:44

Answer 4

A:

Just thought I'd mention this snippet. Should work the same on background images as it does on regular images. If you have a lot of images I wouldn't preload all of them on page load thought, instead use some queue system.

<script type="text/javascript">
        <?
        $i = 0;
        if ($handle = opendir('./images/background')) {
         while (false !== ($file = readdir($handle))) {
          if ($file != "." && $file != "..") {
           echo "preloadimage_".$i." = new Image();\n\t";
           echo "preloadimage_".$i++.".src = \"/images/background/".$file."\";\n\t";
          }
         }
         closedir($handle);
        }
        ?>
    </script>

Peeter 2009-10-18 19:30:04

ansaurus

tags:

views:

answers:

Not Cycling Through in jQuery

related questions