I'm not positive this is the problem but try putting a var in front of
the nextTarget assignment. Right now it looks like a global variable
in the code fragment you posted.
var nextTarget = targetItem.next();
David
On Nov 13, 8:18 am, serializer <[EMAIL PROTECTED]> wrote:
> 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
