Jquery下的动画方法概括

　　Jquery关于动画的方法常用的是show()、hide()、animate()等。

　　1.show()和hide()是一对，hide相当于css("display","none"),而show则相当与把css设成除null以外的值，一般是"block"、"inline"，当调用show时，就会根据hide方法记住dispaly的属性值来显示元素。

　　2.show(600)中还可以带参数，600毫秒中显示，相当于"slow"，"normal"=>400，"fast"=>200.

　　3.fadeIn()和fadeOut()是通过改变透明度直到css("display","none")来控制显示与隐藏的。

　　4.slideUp()和slideDown()是通过改变高度来实现显示与隐藏的。

　　5.animate()是最长用的一种动画显示方法，animate(params,speed,callback)3个参数中最后一个可以不填，第一个是样式属性和值的映射，第二个参数是动画速度，第三个参数是可选的在动画完成时执行的函数。

　　写了个小玩意，点击移动，css的圆角发现在ie9上实现有点困难。

　　用的代码很简单，直接新建个html界面复制就行了。　　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><style type="text/css">body{overflow: hidden;}.one{height: 60px;width: 60px;border: 1px solid yellow;background-color: Aqua;position: relative;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;}</style><script src="Scripts/jquery.js" type="text/javascript"></script>
</head>
<body><div id="divBody" style="width: 100%; height: 100%; background-color: white; position: relative;"><div class="one" id="divMove"></div></div>
</body>
</html>
<script type="text/javascript">var divMoveJQ = $("#divMove");var divBodyJQ = $("#divBody");divBodyJQ.height($(window).height() - 30);//点击空白处
    $("#divBody").mousedown(function (e) {var Mouse = mousePos(e);var left1 = (Mouse.x - GetPosition(divBodyJQ).AbsoluteLeft - divMoveJQ.width() / 2).toString() + "px";var top1 = (Mouse.y - GetPosition(divBodyJQ).AbsoluteTop - divMoveJQ.height() / 2).toString() + "px";divMoveJQ.animate({ left: left1, top: top1 }, 600);});//鼠标位置function mousePos(e) {var x, y;var e = e || window.event;return {x: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,y: e.clientY + document.body.scrollTop + document.documentElement.scrollTop};};//自适应
    $(window).bind("resize", function () {divBodyJQ.height($(window).height() - 30);});//获取控件位置function GetPosition(Selector) {var SelectorJQ = $(Selector);var Position = {};if (SelectorJQ.length > 0) {var position = SelectorJQ.position();Position.RelativeTop = position.top;Position.RelativeLeft = position.left;var offset = SelectorJQ.offset();Position.AbsoluteTop = offset.top;Position.AbsoluteLeft = offset.left;}return Position;};
</script>

View Code

　　发现还是写点注释好，怕自己以后忘记了。。。。。

　　改变样式属性表

方法名	说明
fadeIn()和fadeOut()	只改变不透明度
slideUp()和slideDown()	只改变高度
fadeTo()	只改变不透明度
toggle()	用来代替hide()和show()
slideToggle()	代替slideUp()和slideDown()
fadeToggle()	代替fadeIn()和fadeOut()
animate()	自定义动画方法，
hide()和show()	同时改变多个样式属性即宽度高度不透明度

转载于:https://www.cnblogs.com/gzbnet/p/3277463.html

Jquery下的动画方法概括相关推荐

jQuery中的动画
一.基本动画 1.show()方法和hide()方法:改变display属性为一个元素调用hide()方法,会将该元素的display样式改为"display:none". $( ...
2021/10/31 前端开发之JavaScript+jQuery入门第十二章jQuery事件与动画
目录 1.jQuery中的事件 1.1 事件的组成 1.2 基础事件 2.载入事件 3.鼠标事件 4.键盘事件 5.浏览器事件 6.表单事件 7.绑定事件 8.移除事件 9.复合事件 10.控制元素显 ...
jQuery下的ajax【5分钟掌握】
jquery下的ajax方法 load ajax get post load()方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数 ...
JQuery下锚点的平滑跳转
对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用. 例如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,如下: $("html,body" ...
html用jq设置动态效果,jQuery实现基本动画效果的方法详解
本文实例讲述了jQuery实现基本动画效果的方法.分享给大家供大家参考,具体如下: animate()方法用于创建自定义动画语法: $(selector).animate({params},spee ...
玩转Jquery中的动画效果(animate方法)
jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画. 语法: $(selector).animate({params},speed,callba ...
jQuery自定义动画方法animate()
animate()方法执行CSS属性集的自定义动画,该方法会将一个属性在指定或者默认的时间内从一个属性值变化到另一个属性值,由于属性值是逐渐变化的,所以就形成了所谓的动画效果. 用法: $(selec ...
Jquery下的Ajax调试方法
Jquery下的Ajax调试方法介绍本文介绍Jquery下的Ajax调试方法:很多调试方法,就是一点就通,但是,在还没有通之前,会让人困惑,不知所以然: Ajax 可以为用户提供更为丰富的用户体验 ...
jquery学习（六）-jquery中的动画
参考锋利的jQuery第二版 1.show和hide方法调用方法:element.hide()隐藏元素,element.show()显示元素.其实说白了,其原理就是将元素的样式display值设置为 ...

Jquery下的动画方法概括

Jquery下的动画方法概括相关推荐

最新文章

热门文章