您现在的位置：首页 >> 前端 >> 内容

jquery效果

时间：2016/12/17 9:31:00 点击：

　　核心提示：!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8title/titlestylep{width: 100px;height: 100px;}#p1{bac...

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        p{  
            width: 100px;  
            height: 100px;  
        }  
        #p1{  
            background-color: green;  
        }  
        #p2{  
            background-color: #ffa24a;  
            display: none;  
        }  
        #p3{  
            background-color: #ff231e;  
        }  
    </style>  
</head>  
<body>  
<p id="p1"></p>  
<p id="p2"></p>  
<p id="p3"></p>  
<script src="js/jQuery-2.2.2-min.js"></script>  
<script>  
    /*隐藏元素hide(毫秒)  "slow" "normal" "fast"*/  
    //$("#p1").hide("fast");  
  
    /*显示内容:改变宽和高，最后显示全部*/  
    /*$("#p2").show(2000,function(){  
        alert("ok");  
    });*/  
  
    /*以滑动的方式显示和隐藏起来*/  
  
    /*$("#p2").slideDown(2000);  
    $("#p1").slideUp(2000);*/  
    /*显示的时候就隐藏起来，隐藏的显示出来*/  
    //$("#p2").slideToggle(2000);  
  
    /*fadeIn()：通过改变透明度的方式显示出来*/  
    $("#p2").fadeIn(2000);  
  
    /*fadeout()*/  
    $("#p1").fadeOut(2000);  
  
  
    /*delay():设置某个动作延时执行*/  
    $("#p3").fadeOut(2000).delay(1000).fadeIn(2000);  
</script>  
</body>  
</html>