jQuery Forum

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?  

On a page which offers the viewer a choice of colours for various elements, I have this structure for changing the background: 

Two functions are invoked:

showBg() 

changes the gradient on the html tag;

showLink() 

 shows a link to loading a new page about the chosen colour: this is where there’s a problem.

function showLink(child) {

$('.abt').fadeOut(400);

$('#bgswatch a:nth-child(' + child + ')' ).delay(1200).fadeIn(1200);

}

The function works fine—but the child numbering is crazy.

When I count down the children of #bgswatch”, I get to ’13’ as the correct child number for the corresponding link, "about blue".

But what works is ’17’  And it’s similar for the other five links. What am I missing?

view online  > choose "ask"  > choose " colour"  >  choose "background".

Code below ( no comments right now about using “onclick”, ok?  ):

<p id="bgswatch">

<a href="#" onclick="showBg('gradblu'); showLink('17');"><img src="img/swatch/blu.gif" /></a>

<a href="#" onclick="showBg('graddun'); showLink('18');"><img src="img/swatch/dun.gif" /></a>

<a href="#" onclick="showBg('gradblk'); showLink('19');" ><img src="img/swatch/blk.gif" /></a>

<a href="#" onclick="showBg('gradwhi'); showLink('20');"><img src="img/swatch/whi.gif" /></a>

<a href="#" onclick="showBg('gradred'); showLink('21');"><img src="img/swatch/red.gif" /></a>

<a href="#" onclick="showBg('gradgrn'); showLink('22');"><img src="img/swatch/grn.gif" /></a>

<!— 

the next series of links are relevant to the problem because they’re children of “#bgswatch”;  

opBg() changes the opacity on a grey background, effectively changing the density of the gradient on the html tag.

—>

<a class="faux" style="position:relative; left:-42px;">background:</a></br></br>

<a href="#" onclick="opBg(8);”>a hint</a>

<a href="#" onclick="opBg(6);”>low</a>

<a href="#" onclick="opBg(4);”>medium</a>

<a href="#" onclick="opBg(2);”>high</a>

<a href="#" onclick="opBg(0);”>max</a></br></br>

<!— 

this series of links  are displayed by showLink(); they allow the user to load a page with information about the colour chosen; none is active. 

—>

<a href="#" class="abt nun" onclick="loadIt('abtblue');">about blue</a>

<a href="#" class="abt nun" onclick="loadIt('abtyellow');">about yellow</a>

<a href="#" class="abt nun" onclick="loadIt('abtblack');">about black</a>

<a href="#" class="abt nun" onclick="loadIt('abtwhite');">about white</a>

<a href="#" class="abt nun" onclick="loadIt('abtred');">about red</a>

<a href="#" class="abt nun" onclick="loadIt('abtgreen');">about green</a>

</p>