您的位置：首页 > Web前端 > JQuery

jQuery特效（一）

2016-07-02 23:06 323 查看

一、隐藏与显示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.1.min.js"></script>
<script src="index.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<!--<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">隐藏/显示</button>-->

<script>
for(var i=0;i<5;i++){
$("<div>").appendTo(document.body);
}
$("div").click(function(){
$(this).hide(2000,function(){
$(this).remove();
});
});
</script>
</body>
</html>

$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(1000);
});
$("#show").click(function(){
$("p").show(1000);
});
$("#toggle").click(function(){
$("p").toggle(500);
});
});

div{
background: aqua;
width: 50px;
height: 50px;
margin: 2px;
float: left;
}

二、淡入淡出

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.1.min.js"></script>
<script src="fade.js"></script>
</head>
<body>
<button id="in">fadeIn</button>
<button id="out">fadeOut</button>
<button id="toggle">fadeToggle</button>
<button id="to">fadeTo</button>
<div id="div1" style="width: 80px;display:none;height: 80px; background-color: aqua;"></div>
<div id="div2" style="width: 80px;display:none;height: 80px; background-color: #009B86;"></div>
<div id="div3" style="width: 80px;display:none;height: 80px; background-color: #333333;"></div>
</body>
</html>

$(document).ready(function(){
$("#in").on("click",function(){
$("#div1").fadeIn(1000);
$("#div2").fadeIn(1000);
$("#div3").fadeIn(1000);
});
$("#out").on("click",function(){
$("#div1").fadeOut(1000);
$("#div2").fadeOut(1000);
$("#div3").fadeOut(1000);
});
$("#toggle").on("click",function(){
$("#div1").fadeToggle(1000);
$("#div2").fadeToggle(1000);
$("#div3").fadeToggle(1000);
});
$("#to").on("click",function(){
$("#div1").fadeTo(1000,0.5);
$("#div2").fadeTo(1000,0.7);
$("#div3").fadeTo(1000,0.3);
});
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 特效 jQuery

相关文章推荐

新的分享

章节导航