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

JQuery效果集锦

2016-03-16 15:02 555 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery effects</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$("#hide-slow").click(function(){
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
});
$('#toggle').click(function(){
$("p").toggle("fast");
});
$('#fadein').click(function(){
$("p").fadeIn(3000);
})
$('#fadeout').click(function(){
$("p").fadeOut("slow");
})
$('#fadeto').click(function(){
$("p").fadeTo("slow",0.5);
})
$('#slidedown').click(function(){
$("#pull-down").slideDown("slow");
})
$('#slideup').click(function(){
$("#pull-down").slideUp("fast");
})
$('#move-right').click(function(){
$("#animate").animate({left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
},"slow");
})
$("#stop").click(function(){
$("#animate").stop();
});
$("#chaining").click(function(){
$("#animate").css("background","red")
.slideUp(2000)
.slideDown(2000);
});
});
</script>
</head>
<body>
<p>测试文字</p>
<button id="hide">隐藏</button>
<button id="hide-slow">缓慢隐藏</button>
<button id="show">显示</button>
<button id="toggle">显示/隐藏</button>
</br>
<button id="fadein">淡入</button>
<button id="fadeout">淡出</button>
<button id="fadeto">半透明</button>
<button id="slidedown">下拉</button>
<button id="slideup">上拉</button>
<div id="pull-down" style="padding:50px; display:none; position:absolute; width:200px;">下拉菜单</div>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;" id="animate"></div>
<button id="move-right">右移</button>
<button id="stop">停止</button>
<button id="chaining">连续动作</button>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航