jQuery —— 动画效果

1. jQuery 隐藏与显示 DOM

2. jQuery 淡入和淡出 DOM

3. jQuery 滑动 DOM

4. jQuery 动画

5. jQuery callBack 回调方法

6. jQuery 暂停动画

<script type="text/javascript">
    $(document).ready(function(){
        $("#b1").click(function(){
            $("#p1").show();  //显示
        });
        
        $("#b2").click(function(){
            $("#p1").hide();  //隐藏
        });
        
        $("#b3").click(function(){
            $("#d1").fadeOut(); //淡出
        });
        
        $("#b4").click(function(){
            $("#d1").fadeIn();  //淡入
        });
        
        $("#b5").click(function(){
            // $("#d1").fadeToggle(); 　　　 //淡入淡出开关，淡出状态时点击就淡入
            // $("#d1").fadeToggle("slow"); //速度慢
            $("#d1").fadeToggle(10000); 　　 //指定速度 10s
        });
        
        $("#b6").click(function(){
            $("#d1").fadeTo("slow",0.1); // 透明度 取值范围0-1，透明度依次减弱，0.1很透      
        });
        
        $("#b7").click(function(){
            $("#d4").slideDown("slow"); // 向下滑动
        });
        
        $("#b8").click(function(){
            $("#d4").slideUp("slow"); // 向上滑动
        });
        
        $("#b9").click(function(){
            $("#d5").animate({left:'500px'},'slow'); //移动（ position 要设为 absolute 相对的 ）
        });
        
        $("#b10").click(function(){ // 移动时透明度啥的属性改变
            $("#d5").animate({
                left:'500px',
                opacity:0.5,
                height:'150px',
                width:'150px'
                },'slow');
        });
        
        $("#b11").click(function(){ 
            $("#d5").animate({
                left:'500px',
                opacity:0.5,
                height:'+=150px', // 逐渐变大
                width:'+=150px'
                },'slow');
        });
        
        $("#b12").click(function(){
            $("#p2").show(function(){  // 回调事件
                alert("小日本出来了！");    
            });
        });
        

        $("#b13").click(function(){
            $("#d6").animate({left:'500px'},'slow');  //向左移动
        });
        $("#b14").click(function(){
            $("#d6").stop();   // 停止
        });
    });
</script>

 

转载于:https://www.cnblogs.com/Cocoomg/p/9901301.html