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

Jquery8_简单的动画效果

2013-07-09 01:38 363 查看

=====下面是JQuery提供的动画方法==========

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<style type="text/css">

#d1{width:200px;height:150px;background:lightgreen;}

</style>

<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

/*

都有四个参数 slow 200、fast 400、normal 600 或者直接写毫秒时间

*/

// 显示

$("#btn1").click(function () {

$("#d1").show(1000);

});

// 隐藏

$("#btn2").click(function () {

$("#d1").hide(1000);

});

// 显示和隐藏之间去切换

$("#btn3").click(function () {

$("#d1").toggle(1000);

});

// 展开并向下滑动

$("#btn4").click(function () {

$("#d1").slideDown(1000);

});

// 收起并向上滑动

$("#btn5").click(function () {

$("#d1").slideUp(1000);

});

// 在向下滑动和向上滑动间切换

$("#btn6").click(function () {

$("#d1").slideToggle(1000);

});

// 显示并且透明度加深

$("#btn7").click(function () {

$("#d1").fadeIn(2000);

});

// 透明度减弱并隐退

$("#btn8").click(function () {

$("#d1").fadeOut(2000);

});

// 在指定的时间内将透明度减到指定的值(但是占据着一块区域)

$("#btn9").click(function () {

$("#d1").fadeTo(2000,0.0);

});

// 停止当前所有动画

$("#btnStop").click(function () {

$("#d1").stop();

});

});

</script>

</head>

<body>

<div id="d1">

</div>

<input id="btn1" type="button" value="show" /><br />

<input id="btn2" type="button" value="hide" /><br />

<input id="btn3" type="button" value="toggle" /><br />

<input id="btn4" type="button" value="slideDown" /><br />

<input id="btn5" type="button" value="slideUp" /><br />

<input id="btn6" type="button" value="slideToggle" /><br />

<input id="btn7" type="button" value="fadeIn" /><br />

<input id="btn8" type="button" value="fadeOut" /><br />

<input id="btn9" type="button" value="fadeTo" /><br />

<input id="btnStop" type="button" value="stop" /><br />

</body>

</html>

======模仿QQ列表显示实例========

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<style type="text/css">

#qqTab{width:150px;}

#qqTab li{list-style-type:none;}

#qqTab h3{background:orange;cursor:pointer;}

</style>

<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

// 加载时列表都是隐藏的 next() 紧邻的第一个符合的节点集合

$("#qqTab h3").next("ul").hide();

// 点击分组触发的事件

$("#qqTab h3").click(function () {

// 点击分组时显示或隐藏

$(this).next("ul").toggle("fast");

});

// 默认让好友列表显示 (窗体加载时显示)

$("#qqTab h3:first").click();

});

</script>

</head>

<body>

<div id="qqTab">

<h3>我的好友</h3>

<ul>

<li>胡主席</li>

<li>习主席</li>

<li>周总理</li>

</ul>

<h3>陌生人</h3>

<ul>

<li>张三</li>

<li>李四</li>

<li>麻子</li>

</ul>

<h3>黑名单</h3>

<ul>

<li>凤姐</li>

<li>露露</li>

<li>如花</li>

</ul>

</div>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航