Jquery动画方法 jquery.animate()
目前在学习Oracle数据库，由于刚接触，学校让练习练习HTML内容，就想起了老师以前提起过的animate方法
animate是jquery的一个方法，这个方法主要功能是能实现比较平滑的动态效果，所以你想做一个简单又不失美观的动态效果不如试试它
下面总结一下以前常用的幻灯片效果实现用的方法：
切换：show(time)/hide(time):刚接触Jquery的时候大家应该用的最多的就是这两个方法，我个人觉得这个方法太丑了，一瞬间消失，或者一瞬间出现
列表滚动：这个多数人会直接使用其css属性做，或者position().left。。。等等方法，也是直接就过去了，总觉得不高大上
fadein()/fadeOut():朦胧感
slipeUp/slipedown()...等等
代码量：以上效果，想要实现，代码量大
下面是我实现的一个幻灯片切换效果：
包括大图片切换、小图列表突出显示、文字跟随小图跑、
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>animate实现幻灯片</title> <link rel="stylesheet" type="text/css" href="animate.css" />
<script type="text/javascript" src="jquery-1.8.3.js">
</script> <script type="text/javascript">
var index=0;
var flag=true;
$(function(){
$(".imgshow li:not(:first)").hide();
$(".text li:not(:first)").hide();
styleMe(".imglist li:eq("+index+")");
change(index);
$(".imgshow").mouseover(function(){
flag=false; });
$(".imgshow").mouseout(function(){
flag=true; });
$(".imglist li").bind({
mouseout:function(){
flag=true;
},mouseover:function(){
flag=false;
index=$(this).index(); change(index);
},click:function(){
flag=false;
styleMe($(this));
index=$(this).index();
change(index);
} }); setInterval(function(){ if(flag){
index=index+1;
if(index==5){
index=0;
}
change(index)
} },4000);
});
//图片切换
function change(index){
//图片 styleMe(".imglist li:eq("+index+")");
$(".imgshow li:eq("+index+")")
.show().animate({opacity:'0.5'},300).animate({opacity:'1'},500)
.siblings()
.hide();
//文本
var left=$(".imglist li:eq("+index+")").position().left+180;
//alert(left);
if(index==4){
//200=ul初始位置180px +padding20px;
//获取有些问题，直接赋值
var width=480; left=left-width;
}
$(".text").stop(true,true);
$(".text").animate({opacity:'0.7',marginLeft:left},700).animate({opacity:'1'},200);
// alert("index:"+index+";left:"+left+";width:"+width);
$(".text li:eq("+index+")")
.show()
.siblings()
.hide(); //$(".text").css("margin-left",left); }
function styleMe(doc){
$(doc).stop(true,true);
$(doc).animate({marginTop:'-25px'},200).siblings().animate({marginTop:'0px'},400);
$(doc).addClass("mouse").siblings().removeClass("mouse");
}
</script>
</head> <body> <div>
<ul class="imgshow">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li> </ul>
<ul class="imglist">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li> </ul>
<ul class="text">
<li>电影十二生肖去景点</li>
<li>美国农庄公路</li>
<li>青山碧水</li>
<li>阿尔卑斯山下美丽的山庄</li>
<li>这是小羊肖恩嘛？太可爱了吧，好想拥有一只</li> </ul> </div> </body>
</html>
css代码：
/*animate*/
*{
margin:0px;
padding:0px;
}
body{
width:100%; }
div{
width:1000px;
margin:auto;
}
ul{
width:1000px;
margin:auto;
list-style:none; }
.imgshow img{
height:600px;
width:1000px; }
.mouse{
/** border-bottom:30px solid green;**/
background-color:#2F2F2F;
}
.imglist{
top:480px;
margin-left:50px;
z-index:;
position:absolute;
}
.imglist li{
float:left;
padding:20px 10px;
display:block; }
.imglist img{
height:60px;
width:100px; }
.text{
width:auto;
top:430px;
margin-left:180px;
z-index:;
position:absolute; }
.text li{
padding:20px 30px;
background-color:#2F2F2F;
color:#ccc;
font-size:14px; }
效果图：
总结：
animate缺点：
每个动画必须演示完才能结束，这就导致如果频繁去使用这个方法，会导致延迟（实际上不是）
优点：
animate支持同一个容器的所有动作可以依次从第一个往下执行，这个特性我最喜欢！
个别缺点解决办法：
延迟可以使用document.stop("容器名");
Jquery动画方法 jquery.animate()的更多相关文章
- jQuery动画方法
下面介绍一些使用jQuery实现动画的方法: html中有如下代码: <button id="btn-box1">show</button> <but ...
- 一个老忘且非常有用的jquery动画方法 网页上卷
$('html,body').animate({scrollTop:800+'px'},500) //网页上卷800像素 在半秒之内
- jquery 使用方法<转载>
jquery 使用方法 jQuery是目前使用最广泛的javascript函数库.据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司 甚至把jQuery作为他们的官 ...
- [转] jquery 使用方法
jquery 使用方法 jQuery是目前使用最广泛的javascript函数库.据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司 甚至把jQuery作为他们的官 ...
- css3动画和jquery动画使用中要注意的问题
前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性. 1. css3动画讨论 先看代码: html: <div id ...
- jQuery自学笔记（三）：jQuery动画效果
jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector ...
- jQuery效果之jQuery Color animation 色彩动画扩展
jQuery 的动画方法(animate)支持各种属性的过渡,但是默认并不支持色彩的过渡,该插件正是来补足这一点! PS: 该插件支持 RGBA 颜色的过渡,但是请注意,IE8以下的版本不支持 RGB ...
- jquery 连写注释;siblings() 方法;jQuery 的3种滑动方法;slideUp()向上滑动;slideDown()向下滑动;slideToggle()来回滑动
首先我们看两个连写注释 第一个: /* 点击头像,显示基本资料 */ $(".f-chatTit a.avatar").click(function(){ $(this).hi ...
- jQuery 滑动方法slideDown向下滑动元素
通过 jQuery可以在元素上创建滑动效果,jQuery slideDown() 方法用于向下滑动元素. jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以 ...
随机推荐
- linux 常见操作命令
1.网络查询和配置 查询网卡和配置信息:ifconfig 查询指定网卡信息:ifconfig eth1 配置网卡ip信息:vi /etc/sysconfig/network-scripts/ifcfg ...
- IE11下，IIS7.5不自动生成__doPostBack事件
MS在 2013/10/8 已出补丁 http://www.microsoft.com/zh-cn/download/details.aspx?id=39257 https://support.mic ...
- 【Pro ASP.NET MVC 3 Framework】.学习笔记.1.主要语言特性
C# 是一个富有特性的语言,并不是所有的程序员都熟悉本书依赖的所有特性.在本章,我们看看作为一个好的MVC程序员需要知道的C#特性. 1 C#主要特性 } 1.1 使用扩展方法 扩展方法 在你不能拥有 ...
- linux乱码
修改系统变量: export LANG=en
- React Native 开发笔记
ReactNativeDemo 学习ReactNative开发,搭建ReactNative第一个项目 React Native 开发笔记 1.安装Homebrew $ /usr/bin/ruby -e ...
- PHP中header函数的用法及其注意重点是什么呢
1.使用header函数进行跳转页面: header('Location:'.$url); 其中$url就是将要跳转的url了. 这种用法的注意事项有以下几点: •Location和":&q ...
- JavaEE基础（二十三）/递归
1.File类递归练习(统计该文件夹大小) 需求:1,从键盘接收一个文件夹路径,统计该文件夹大小 2.File类递归练习(删除该文件夹) 需求:2,从键盘接收一个文件夹路径,删除该文件夹 3.File ...
- layer
一款实用的web提示框架!下面是实用这款框架的实例 html代码 <p class='layer_notice'>我们是否是好惹的</p> <input type=&qu ...
- app缓存设计-文件缓存
采用缓存,可以进一步大大缓解数据交互的压力,又能提供一定的离线浏览.下边我简略列举一下缓存管理的适用环境: 1. 提供网络服务的应用 2. 数据更新不需要实时更新,哪怕是3-5分钟的延迟也是可以采用缓 ...
- HDU 1402:A * B Problem Plus
A * B Problem Plus Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...