Hi,
I've set up a simple extension for an image rotator. It looks like
this:
jQuery.fn.imageRotate = function(delay,speed) {
// Converted s into ms
delay = delay * 1000;
// Get all child items of the list
var targetItems = $(this).children();
// Hide all except first item (and store the first item as
targetItem)
var targetItem = targetItems.hide().slice(0,1).show();
// Set a JS timeout for next rotation
setTimeout(function(){
$(this).imageRotateNext(targetItem,delay,speed);
},delay);
};
jQuery.fn.imageRotateNext = function(targetItem,delay,speed) {
nextTarget = targetItem.next();
if (!nextTarget.is("li")) {
// Get first child of the list by slicing first element
of
collection
nextTarget = $(this).children().slice(0,1);
// Move it to the end of the list
$(this).append(nextTarget);
}
nextTarget.fadeIn(speed,function(){
// Previous item will be hidden on fade completion
targetItem.hide();
});
setTimeout(function(){$
(this).imageRotateNext(nextTarget,delay,speed)},delay);
};
The HTML markup is a plain unordered list, with each list item
containing one image. If you call $
("ul#myList1").imageRotate(2,"fast") the extension hides all except
the first image, then starts fading each one in over the top after the
specified number of seconds (delay).
It works beautifully when just one image is rotating. Once I get more
than one on the page at once, however, images start intermittently
disappearing.
It seems like it's being caused by the *other* list; meaning, when an
image from the *second* list fades in, the current image in the
*first* list gets hidden.
I conclude that the targetItem.hide() which gets called on completion
of fadeIn is causing the problem. It should be hiding the image in the
second list, but by the time the callback is performed, targetItem is
now referring to the targetItem from the *first* list, so that gets
hidden instead.
I hope this is clear so far !
So really, I think I understand the problem, I'd just like to know
other people's recommendations for how to solve this type of problem,
namely Javascript variable scope within callback functions. How do I
set up a callback that will have a reference to the object this
variable holds *now*, rather than the reference it points to *when*
the callback is raised? I've come up against this issue a few times,
so I think understanding this solution might help me in quite a few
places.
Thank you kindly,
Pete Hurst
