We help IT Professionals succeed at work.

jquery slide animation

rivkamak
rivkamak used Ask the Experts™
on
I am trying to use a jquery slide up animation on this page:
http://www.kars4kids.org/jingle/test.asp

For some reason, after it slides, it goes too far down so it jumps back to the top of the next div.
How do I stop that jumping that the slide should stop right on the next line?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
I removed the line

$(this).css('top', '0px');

Open in new window

from the animate callback and the jumping stopped.

I also hacked the height calculation in the code below just to see if it worked, which it appears to. You'll probably want to organise your code better than this, I just couldn't quite work out what the rest of your height calculation code was doing, so I didn't want to mess with it. Basically call outerHeight on the first div element of the item li instead. This is in your moveUp method.

// my hack
nheight = obj.find('li:first > div').outerHeight(true);
		
obj.animate({top: '-=' + nheight + 'px'}, options.speed, function() {
       	$(this).children('li:first').remove();
	// removed this
       	//$(this).css('top', '0px');
});

Open in new window

Author

Commented:
The jumping stopped, but I tried your hack, but now it's not moving at all.
I just need the page to figure out to stop at each div, and not more.
It was sliding correctly when I tried it. One item at a time. Did you work it out?

Author

Commented:
I though it was working, but now that I put the real text, it started jumping again.