Trouble with jQuery animate() on a panel that contains the anythingSlider()

I'm using the jQuery anythingSlider to rotate content. I have a little tab underneath the slider which the user can click on to toggle display of the entire slider. I'm using the jQuery animate() function on a div that wraps the entire slider. When I do this, it disables the anythingSlider arrows, which is my problem. When I remove the animate function from the div wrapper, the anythingSlider arrows work again. I have a feeling there's a problem with putting the anythingSlider inside a div that has the jQuery animate function applied to it. Can anyone confirm this? If so, what's another way I can toggle display of the anythingSlider?

Here it is on jsFiddle where you can see the problem I'm having with the arrows not working: http://jsfiddle.net/brianmcculloh/H2hPQ/3/

HTML:

<div id="slider-wrapper">             
<div id="slider">        
        <div class="wrapper"> 
            <ul>
                <li> content... </li>
                <li> content... </li>
                <li> content... </li>
                <li> content... </li>
                <li> content... </li>
                <li> content... </li>
            </ul>
        </div>
<div class="bottom">&nbsp;</div>
</div></div>



<div id="slider-tab"> <!-- the tab that toggles the slider panel --> 
    <div onclick="showslider()" id="slider-button"> 
        <a title="Toggle this panel">toggle</a> 
</div></div>

Javascript:

function showslider() {
        $('#slider-wrapper').animate({
             opacity: 'toggle',
             height: 'toggle',               
            }, 300, 'linear' );
    }

 $(document).ready(function() { 

        fun开发者_如何学运维ction formatText(index, panel) {
          return index + "";
        }

        //SLIDER
        $('#slider').anythingSlider({
            easing: "easeInOutExpo",        // Anything other than "linear" or "swing" requires the easing plugin
            autoPlay: true,  // This turns off the entire FUNCTIONALY, not just if it starts running or not.
            delay: 3000,  // How long between slide transitions in AutoPlay mode
            startStopped: false,            // If autoPlay is on, this can force it to start stopped
            animationTime: 600,             // How long the slide transition takes
            hashTags: false,                 // Should links change the hashtag in the URL?
            buildNavigation: false,          // If true, builds and list of anchor links to link to each slide
            pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
            startText: "Go",             // Start text
            stopText: "Stop",               // Stop text
            navigationFormatter: formatText       // Details at the top of the file on this use (advanced use)
        });
    }); 

Had to move this:

<div class="bottom">&nbsp;</div>

outside of the slider div. That markup was screwing up the arrow functionality.