Php Jquery-如何使用带有复选框的Hide（）来启用动画（转换）？

问题：如何将JQuery Hide（）与网页部分的动画结合使用？目前我正在使用CSS:DisplayNone

代码

CSS

HTML

...

Javascript:

$（函数（）{
$（'#切换事件运动'）。更改（函数（）{
$（“#节运动”）.toggleClass（'hide'）；
})
})

请尝试以下隐藏和显示部分的功能

    <input type="checkbox" id="toggle-event-Sports" value="1" onchange="valueChanged()">
        <section class="hide" id="section-sports">...</section>

        <script type="text/javascript">
        function valueChanged()
        {
             if($('#toggle-event-Sports').is(":checked"))   
                //$("#section-sports").show();
                $('#section-sports').fadeIn('slow');
            else
                //$("#section-sports").hide();
                $('#section-sports').fadeOut('slow');

        }
       </script>

...
函数值已更改（）
{
如果（$（“#切换事件运动”）为（“：选中”））
//$（“体育节”）.show（）；
$（'section sports'）.fadeIn（'slow'）；
其他的
//$（“体育节”）.hide（）；
$（#section sports'）。淡出（'slow'）；
}

以下是您所需的简单工作解决方案：

1。向上/向下滑动动画：

$（'#切换事件运动'）。更改（函数（）{
如果（$（“#切换事件运动”）为（“：选中”））
$（“体育节”）.slideDown（）；
其他的
$（“体育节”）.slideUp（）；
});
#节运动{宽度：100px；高度：100px；背景：红色；显示：无；}

…
你需要什么动画？>非常感谢Sahil:）非常感谢Shital！乐意帮忙：）
<input type="checkbox" id="toggle-event-Sports" >
<section class="hide" id="section-sports">...</section>

<script>
    $(function() {
        $('#toggle-event-Sports').change(function() {    
            $("#section-sports").toggleClass('hide');
        })
    })
</script>

    <input type="checkbox" id="toggle-event-Sports" value="1" onchange="valueChanged()">
        <section class="hide" id="section-sports">...</section>

        <script type="text/javascript">
        function valueChanged()
        {
             if($('#toggle-event-Sports').is(":checked"))   
                //$("#section-sports").show();
                $('#section-sports').fadeIn('slow');
            else
                //$("#section-sports").hide();
                $('#section-sports').fadeOut('slow');

        }
       </script>