JQuery animate动画应用示例
程序员文章站
2023-01-09 15:30:19
本文实例讲述了jquery animate动画。分享给大家供大家参考，具体如下：
滑动选项卡
本文实例讲述了jquery animate动画。分享给大家供大家参考，具体如下：
滑动选项卡
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style type="text/css">
.btns input{
width: 100px;
height: 40px;
background-color: grey;
border: 0;
}
.btns .current{
background-color: gold;
}
.cons .slides div{
width: 500px;
height: 300px;
background-color: gold;
/*display: none;!*整体都不显示了*!*/
text-align: center;
line-height: 300px;
font-size: 30px;
float: left;/*把三个div由隐藏改为浮动*/
}
.cons{
width: 500px;
height: 300px;
overflow: hidden; /*超过cons的slide隐藏*/
position: relative;/*相对于slide绝对定位*/
}
.slides{
width: 1500px;
height: 300px; /*把slide加长*/
position: absolute;/*相对于cons相对定位*/
}
.cons .active{
display: block;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var $btn=$('.btns input');
var $slides=$('.cons .slides');
// alert($btn.length);
// alert($div.length);
$btn.click(function () {
// 我点击哪一个按钮，$(this)就指的是谁,而this
//指的是原生的，$（this）指的是jquery的
// $(this).siblings().removeclass('current');
// $(this).addclass('current');//可以用链式调用
$(this).addclass('current').siblings().removeclass('current');
// var num=$(this).index();
// $div.eq($(this).index()).addclass('active').sibling().removeclass('active');
$slides.animate({left:(-500*$(this).index())});
})
})
</script>
</head>
<body>
<div class="btns">
<input type="button" name="" value="01" class="current">
<input type="button" name="" value="02">
<input type="button" name="" value="03">
</div>
<div class="cons">
<div class="slides">
<div >选项卡1的内容</div>
<div>选项卡2的内容</div>
<div>选项卡3的内容</div>
</div>
</div>
</body>
</html>
将slides下面的div由隐藏改为浮动，将cons设置成绝对定位，将slides改为相对定位。超过cons的slides隐藏。
点击事件发生之后，相对定位改变。
animate动画
$div=$('#div1');
$div.animate({
width:300,
height:300
},1000,'swing',function () {
alert('done');
})
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$box=$('.box');
$box.animate({
width:300,
height:300
},1000,'swing',function () {
alert('done');
})
})
</script>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: gold;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
用animate动画改变box大小，完成之后用回调函数弹出done
感兴趣的朋友可以使用如下工具测试上述代码运行效果：
在线html/css/javascript代码运行工具：
http://tools.jb51.net/code/htmljsrun
在线html/css/javascript前端代码调试运行工具：
http://tools.jb51.net/code/webcoderun
更多关于jquery相关内容还可查看本站专题：《jquery动画与特效用法总结》、《jquery切换特效与技巧总结》、《jquery扩展技巧总结》、《jquery常用插件及用法总结》、《jquery拖拽特效与技巧总结》、《jquery表格(table)操作技巧汇总》、《jquery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。
上一篇： 迅捷cad编辑器怎么使用浏览器面板?
下一篇： 关键词的密度需要怎么调整会比较好？