David,
Thanks, that did actually work (although I've made that change to an
earlier version of my script; wrapping the code in a jQuery extension
seemed to introduce other problems, and I haven't got the time right
now to investigate why; since I've got the thing working, I might
just have to leave it there for now!)
Clearly I need to understand a little more about variable scope in JS :
(
serializer
On 13 Nov, 21:05, David Serduke <[EMAIL PROTECTED]> wrote:
> 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
