CODEWITHSUNDEEP
jquery
maikunari
maikunari

Reputation: 109

Conflict with jscrollPane and animate

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!!

Upvotes: 1

Views: 382

Answers (1)

SeanCannon
SeanCannon

Reputation: 77966

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.

Upvotes: 1

Related Questions