jQuery显示隐藏动态效果的几种写法

时间:2023-03-09 15:20:57
jQuery显示隐藏动态效果的几种写法

<script type="text/javascript">
 $(document).ready(function() {
     /*$("#test1").click(function(){
        $("#test2").toggle("fast",function(){
            
        });
    });*/
        /* $("#test1").click(function(){
            $("#test2").toggle(5000,function(){
                
            });
        }); */
    /*     $("#test1").toggle(function(){
            $("#test2").show(5000,function(){});
        },function(){
            $("#test2").hide(5000,function(){});
        }); */
        
/*         $("#test1").click(function(){
            $("#test2").slideToggle("slow");
        });
         */
        
         $("#test1").toggle(function(){
             $("#test2").fadeTo(1000,0.3);    //透明度
         },function(){
             $("#test2").fadeTo(1000,0);
         });
});

</script>

<style type="text/css">

</style>
</head>

<body>
    <div>
        <ul>
            <li id="test1">什么是jQuery?</li>
            <ul id="test2" style="display: none;">
                <li style="width: 200px; ">
                    jQuery是继prototype之后又一个优秀的Javascript库。
                    它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器
                    (IE 6.0+, FF 1.5+, Safari 2.0+,
                     Opera 9.0+),jQuery2.0及后续版本将不再
                     支持IE6/7/8浏览器。
                </li>
            </ul>
        </ul>
        
    </div>
</body>