隐藏元素但fadeToggle（）不起作用

Question

<script type="text/javascript">
$(document).ready(function() {
    $('#slider').hide();

    $('h3#work').click(function() {
        $('#slider').fadeToggle('slow');
    });
});
</script>

这个jQuery代码应该切换一个淡入/淡出框但是hide()的第一行覆盖了它！

它没有hide()，所以我必须要有某种条件。有什么提示吗？

以下是HTML代码：

<div id="content_slider">

     <div id="slider">            
            <div id="slider_holder"><!-- slider content below-->
        <ul id="slider1"><!-- master holder slider -->

            <li><!-- derm surg-->
            <div id="wrapper_2">

              <div id="video">
              <iframe width="400" height="275" src="http://www.youtube.com/embed/4Ty0dGHpzt8" frameborder="0" allowfullscreen></iframe>
              </div>
              <div id="text">
              <h2><a href="http://www.dermsurgscientific.com">Dermsurg Scientific</a></h2>
              <p>
            Web Developer for Dermsurg Scientific, a medical start-up that has designed and built a new surgical model for doctors to train their facial surgery skills in all types of suturing and tumor removal.

              <br/>
              <br/>

                      I did the design, development and used Magento for our store
                      </p>
              </div>
            </div>
            </li>

Answer 1

使用$('#slider').fadeOut(0);代替$('#slider').hide();

Answer 2

适合我：http://jsfiddle.net/V83kg/

Answer 3

尝试使用fadeToggle回调

<script type="text/javascript">

    $(document).ready(function()
    {
        $('h3#work').click(function()
        {
            $('#slider').fadeToggle('slow', function()
            {
                $('#slider').hide();
            });
        });
    });

</script>