Jquery动画

来源:互联网 发布:武汉关键词优化 编辑:程序博客网 时间:2024/06/07 14:12

主要是包括:

1.显示和隐藏

2.淡入淡出,透明

3.动画


$(document).ready(function(){
         $("#button1").click(function(){
             $("p").show();  //显示p标签
         });
         $("#button2").click(function(){
             $("p").hide(); //隐藏p标签
         });
         $("#button3").click(function(){
             $("div").fadeOut("slow");//淡出组件
         });
         $("#button4").click(function(){
             $("div").fadeIn("slow");//淡入组件
         });
         $("#button5").click(function(){
             $("div").fadeToggle("slow");//淡入淡出开关
         });
         $("#button6").click(function(){
             $("div").fadeTo("slow",0.1);//透明度
         });
         $("#button7").click(function(){
             $("div").slideDown("slow");//向下滑动
         });
         $("#button8").click(function(){
             $("#d1").slideUp("slow");//向上滑动
         });
         
        $("#button9").click(function(){
                $("#d2").animate({
                left:'500px',  //左移动500px
                opacity:0.5,//透明度0.5
                height:'+=150px',  //逐渐增加150px
                width:'+=150px'
                },'slow');
        });
         $("#button10").click(function(){
            $("#d2").stop(); //暂停动画
                
        });
    });

0 0