jQuery fadeOut: working on one page but not another

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, 开发者_JS百科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).

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.

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. :)

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.