jQuery fadeOut: working on one page but not another

Question

So this is pretty specific to a website I am working on.

I have created my own, very simple jQuery rotator for a showcase / portfolio part of a website I am working on. However on one page the script works and on another page not even a simple fadeOut() seems to work.

The two pages are:

1) http://dropyx.jonblower.co.uk

2) http://dropyx.jonblower.co.uk/the-work/

If you click on the < or > you will see what I mean. All the javascript is inline and can be seen if you view source.

Any help would be greatly appreciated. I've been struggling on this all afternoon, and it is bound to be something simple which I have been overlooking.

EDIT: Interestingly, trying to use fadeIn() effect works. I can also cause a simple "alert()" to display when the arrows are clicked on 2).

Answer 1

It looks like your second page is just fading out before it ever fades in. Running the fade-in command on the firebug console works just fine.

EDIT: Oops I was editing while you edited. :)

Answer 2

The container isn't actually containing the elements properly.

In your CSS add

#showcase-page-0 { float: left; }

You're also missing the return false from the onclick.

Answer 3

I had forgotten to add a class which appears on my front-page but not the portfolio page. This adds the css property "overflow: auto;" which fixes the problem.

Knew it would be something simple.

So just to clarify. For fadeOut to work, element/container must enclose its children correctly.