Hi,

I can’t figure out how to cancel an animation after a first iteration ( using old-fashioned jQ animate() ) .

The animation works like this: click on the image and the image is re-sized and re-positioned.

I can see two ways which could stop further, unwanted, clicking:

change the z-index of the image, so that it goes down the stack, behind a transparent screen--(the screen is integral to the page anyway, it's not just for this animation);

or

wrap the function with one{), like $(‘#myimage').one( ‘click’, function() { myfunction() }};

I can’t get either approach to work.

With the z-index method, adding zIndex: ’-=2’ to the animation has no effect (nor does any other minus quantity).

Using ‘one()’, I get strange behaviour: the first click does nothing; a second click gives two iterations of the animation; and further clicks give more iterations.

Code follows: I’ve left the css inline for ease of diagnosis: moving it to stylesheet doesn’t affect outcomes.

image:

<img id=“oldpic” 

src="pix/old.jpg"

style="position:relative; top:-65px; right:330px; 

  z-index:41;

  width:178px; height:125px;" 

onmouseover=“$(‘#oldpic’).css('cursor', 'zoom-in');"

onClick=“bigPic()”  />

basic animation:

function bigPic() {

$(‘#oldpic’).animate( {height:'302', width:'424', top:'-=96', right:'-=125'}, 2400); 

}

trying to change z-index—with the transparent screen at z-index:40;

function bigPic() {

$(‘#oldpic’).animate( { zIndex: ‘-=-2’, height:'302', width:'424', top:'-=96', right:'-=125' }, 2400); 

}

trying one():

$(‘#oldpic’).one( ‘click’, function() {

$(‘#oldpic’).animate( {height:'302', width:'424', top:'-=96', right:'-=125'}, 2400); 

});

What am I missing?