jq animate动画详解

// animate():第一个参数：{width:200} 运动的值和属性
// 第二个-时间：默认400ms{},1000
//第三个-运动形式-两种：1.默认：swing(慢快慢) 2.linear(匀速)
//第四个-回调函数
//$(this).animate({width:"300px",height:"300px"},2000,'linear',function(){alert(123)});

//stop():默认阻止当前运动，不阻止所有，stop(true) 阻止后续所有运动，stop(true,true) 当前运动立马完成 = finish()立即完成运动。

stop(true,true) 停止到最终的目标点

finish() 立即完成运动。

运动前加stop()可以清除运动队列(不总是重复)。(鼠标移入移除 mouseover、out)

$(this).stop().animate({width:'200px'},1000) //针对的是同一个元素上面的效果

会用:

//动画延迟
.leftToRight{left:0;
}
$('.leftToRight').delay(800).animate({left:100px},"solw");animated方法中没有封装transform属性解决方案：
（1）css方法$($sub).animate({},5000,function(){  $(this).css({'transform':'translateX(300px)'});
})
在动画函数的回调函数里执行。时间和效果就没了意义，毕竟函数是在动画完成之后才有调用（2）addClass方法
可以通过addClass()方法来代替此动作：
比如想旋转一个icon
在css中加入一个classCss代码
.add_transform{  transform:rotate(180deg);  -ms-transform:rotate(180deg);/* IE9 */  -moz-transform:rotate(180deg);/* Firefox */  -webkit-transform:rotate(180deg);/* Safari和Chrome */  -o-transform:rotate(180deg);/* Opera */  transition:all 0.5s ease-in-out;  -moz-transition:all 0.5s ease-in-out;/*Firefox 4 */  -webkit-transition:all 0.5s ease-in-out;/* Safari和Chrome */  -o-transition:all 0.5s ease-in-out;/* Opera */
}  然后通过$(“选择器”).toggleClass(“.add_transform”);来使icon的旋转变为动画效果。

<script>
//jQuery动画animate和scrollTop结合使用
$('li').click(function(){//$(document).scrollTop($(this).index()*viewHeight);var H = $(this).index()*viewHeight;var heiGht = $('#div1').offset().top;$('html,body').animate({scrollTop: H}, 1000);});
</script>

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<style>#box { width: 100px; height: 100px; background-color: red; position:absolute;
} #pox { width: 100px; height: 100px; background-color: green; position: absolute; top: 200px;
}
</style>
</head>
<body><input type="button" class="button" value="开始" /><input type="button" class="stop" value="停止" /> <div id="box">box</div> <div id="pox">pox</div>
<script type="text/javascript">$(function () {   $(".button").click(function () { $("#box").animate({ left: "300px"  //要想使用left top bottom right这种方向性的属性 先必须对"#box元素设置CSS 绝对定位 }) })  //-------------------------------------同步动画  $(".button").click(function () { $("#box").animate({ width: "300px", height: "200px", opacity:0.5, //透明度为0.5 注：透明度的值在0-1之间 fontSize:"200px", //字体大小设为30px }) //第一个参数：是一个对象，他是键值对的css }) //让指定元素左右移动$("#right").click(function(){$(".block").animate({left: '+50px'}, "slow");});$("#left").click(function(){$(".block").animate({left: '-50px'}, "slow");});//--------------------------------------列队动画,一个一个来 $(".button").click(function () { $("#box").animate({ width: "300px"}, 1000, function(){ $("#box").animate({height:"200px"},1000,function(){ $("#box").animate({opacity:0.5},1000,function(){ $("#box").animate({fontSize:"150px"},1000,function(){alert("完毕")}) }); }); }); }) //在同一个元素的基础上，使用链式(队列)调用也可以实现列队动画 $(".button").click(function () { $("#box") .animate({ width: "300px" }, 1000) .animate({ height: "200px" }, 1000) .animate({ opacity: 0.5 }, 1000) .animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕")}) }); //那我们现在的需求是：不管你有几个元素，我都要他们依次实现列队动画效果。(测试了一下，只能用这种回调函数嵌套的方式来实现了) $(".button").click(function () { $("#box").animate({ width: "300px" }, 1000, function () { //box$("#pox").animate({ height: "200px" }, 1000, function () { //#pox$("#box").animate({ height: "200px"}, 1000, function () { $("#pox").animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕") }); }) }) }) }) //那下面再来了解下，列队动画的停止 $(".button").click(function () { $("#box").animate({ left: "300px" },1000) .animate({ bottom: "300px" }, 1000) .animate({ width: "300px" }, 1000) .animate({ height: "300px" }, 1000)                   }) $(".stop").click(function () { $("#box").stop(true); // 加参数停止所有动画，不加停止当前 }) //现在，我们想继续在.queue()方法后面再增加一个隐藏动画，这时发现居然无法实现。
这是.queue()特性导致的。
有两种方法可以解决这个问题，jQuery 的.queue()的回调函数可以传递一个参数，
这个参数是next 函数，在结尾处调用这个next()方法即可再链式执行列队动画。 //链式编程实现队列动画 $(".button").click(function () { //四个动画 $("#box") .slideUp(1000) .slideDown(1000) .queue(function (next) { //这个next是一个函数 $(this).css("background", "yellow"); next();}) .hide(1000); }); //顺序编程实现队列动画 我们看到使用顺序调用的列队，逐个执行，非常清晰 $(".button").click(function () { $("#box").slideUp(1000); $("#box").slideDown(1000); $("#box").queue(function (next) { $(this).css("background", "yellow"); next(); }); $("#box").hide(1000); }); });</script>
</body>

jq animate动画详解相关推荐

超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解本文摘自超级强大的SVG SMIL animation动画详解_Zoomla!逐浪CMS官网 (z01.com),网站看上去有年头了,担心哪天会 ...
[转]超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究. 本文地址:http://www.zhangxinxu.com/word ...
Android 动画详解-思维导图版
转载请注明链接: https://blog.csdn.net/feather_wch/article/details/81503233 涉及视图动画(补间动画.逐帧动画).属性动画三种动画的使用方法, ...
vue3过渡和动画详解
vue3过渡和动画详解一.认识动画二.Vue的transition动画三.Transition组件的原理四.class添加的时机和命名规则五.过渡css动画六.同时设置过渡和动画七.过渡 ...
学习笔记-Flutter 动画详解（一）
Flutter 动画详解(一) 本文主要介绍了动画的原理相关概念,对其他平台的动画做了一个简要的梳理,并简要的介绍了Flutter动画的一些知识. 1. 动画介绍动画对于App来说,非常的重要.很多 ...
Android 属性动画详解
Android 属性动画详解 Android动画类型: View Animation(即所谓的Tween Animation补间动画):View Animation相当简单,不过只能支持简单的缩放. ...
Unity中的Animator动画详解
Unity中的Animator动画详解 Animator动画导入 Animator动画详解动画类型选择 Rig面板属性 Mode面板属性 Animation面板属性动画片段控制使用 Animat ...
iOS核心动画详解swift版----基础动画
2019独角兽企业重金招聘Python工程师标准>>> iOS核心动画详解swift版---基础动画创建工程,添加2个ViewController,通过rootViewContro ...
[转] ReactNative Animated动画详解
http://web.jobbole.com/84962/ 首页所有文章 JavaScript HTML5 CSS 基础技术前端职场工具资源更多频道▼ - 导航条 -首页所有文章JavaScr ...

jq animate动画详解

jq animate动画详解相关推荐

最新文章

热门文章