Question

I am using jscollPane on a div that is displayed via the jquery animate function.

The animate function seems to be causing a conflict with the jscrollpane script and thus the scrollbars do not show.

Here is an example page to demonstrate: http://mikesewell.net/dev/scrollpane/

The div #text is hidden using display: none; it is shown using this function:

$(".bio-button").hover(function() {
        $(this).next("#text").animate({opacity: "show"}, "slow");
    }

If I dont’ hide #text jscrollPane works fine, but if using this function to animate stops the scrollbars from showing.

Any suggestions would be greatly, greatly appreciated. Thanks!!

Answer 1

Instead of :

 $(this).next("#text").animate({opacity: "show"}, "slow");

Try this:

$('#text').fadeIn('slow');

There should only be one div with id="text" so there’s no need to traverse the DOM to find it.

Also, per JQuery Docs:

Unlike shorthand animation methods such as .slideDown() and .fadeIn(),
the .animate() method does not make hidden elements visible as part of
the effect.