$下载链接详情点击Jquery-day01查看官方网站下载地址

Jquery-day02

1.Jquery动画使用animate-(JQ-2.1)

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ-animate</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
$(".wheat").mousemove(function () {
$(".wheat").animate({left:'100px',height:'+150px',width:'+150px',},"slow"); //动画
//+=累加 //opacity 属性设置元素的不透明级别。
//必需的 params 参数定义形成动画的 CSS 属性。
//可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
//可选的 callback 参数是动画完成后所执行的函数名称。
})
}) </script>
</head>
<body>
<div class="wheat" style="height: 100px; width: 100px; border: solid wheat; background: whitesmoke ;position: absolute">
jquery
</div>
<!-- absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。-->
</body>
</html>

2.停止一切动画stop-(JQ-2.2)

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ-stop</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
$(".div1").mousemove(function () {
$(".div2").animate({height:'200px'},3000);
})
$("button").click(function () {
$(".div2").stop(true); //默认false手动设置true
})
})
//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
//可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
//因此,默认地,stop() 会清除在被选元素上指定的当前动画。 // jQuery stop() 方法用于停止动画或效果,在它们完成之前。
//stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画
</script>
</head>
<body>
<button type="button">停止</button>
<div class="div1" style="width: 200px; height: 50px; background: wheat"></div>
<div class="div2" style="width: 200px; height: 0px; background: purple;position: absolute"></div> </body>
</html>

3.callback函数-(JQ-2.3)

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ-callback</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
$(".wheat").click(function () {
$(".wheat").animate({left:'100px',height:'+150px',width:'+150px',},"slow",function () {
11 alert("动画完成");
}); //动画
//+=累加 //opacity 属性设置元素的不透明级别。
//必需的 params 参数定义形成动画的 CSS 属性。
//可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
//可选的 callback 参数是动画完成后所执行的函数名称。
})
}) </script>
</head>
<body>
<div class="wheat" style="height: 100px; width: 100px; border: solid wheat; background: whitesmoke ;position: absolute">
jquery
</div>
<!-- absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。-->
</body>
</html>

引用JQ-2.1的代码  实现callback函数

function () {   alert("动画完成");   代码中红色标注部分。

4.使用Chaining方式在相同元素上运行多条Jquery。-(JQ-2.4)

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ-Chaining</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$(".div1").slideToggle(1000).css("background","wheat").animate({height:'200px'});
//使用效果 滑动效果,css属性,动画效果
//Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上)
})
})
</script>
</head>
<body> <button type="button" style=" height: 30px; width: 200px;">点击运行</button>
<div class="div1" style="height: 100px; width: 200px; background: purple"></div> </body>
</html>

$总结

    到此部分为Jquery基础部分。

    

Jquery的动画的更多相关文章

  1. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  2. jQuery的动画处理总结

    最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...

  3. jQuery实现动画过程中尽量避免出现网页滚动条

    jQuery实现动画过程中尽量避免出现网页滚动条,不然可能会出现动画效果异常.

  4. jQuery Easing动画效果扩展(转)

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  5. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  6. 精选7款绚丽的HTML5和jQuery图片动画特效

    在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...

  7. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

  8. jQuery 停止动画

    jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 停止滑动 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动演示 jQuery stop() 方法. jQue ...

  9. 放弃使用jQuery实现动画

    在Web开发的圈子里,开发人员经常觉得CSS动画是一种高性能web动画技术.假设想让网页载入的更快一些,就应该用纯CSS动画.事实上这样的观点是错误的,非常多开发人员早就放弃了javascript的动 ...

  10. jQuery Easing 动画效果扩展

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

随机推荐

  1. Vue.js:样式绑定

    ylbtech-Vue.js:样式绑定 1.返回顶部 1. Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v- ...

  2. 微信小程序之wx.requestPayment 发起微信支付

    wx.requestPayment 发起微信支付 timeStamp 时间戳 nonceStr 随机字符串 package 统一下单接口返回的 prepay_id 参数值 signType 签名算法 ...

  3. 如何检测 51单片机IO口的下降沿

    下降沿检测,说白了就是满足这样一个逻辑,上次检测是1,这次检测是0,就是下降沿. 从这个条件可知,要确保能够正确检测到一个下降沿,负脉冲的宽度,必须大于一个检测周期,当负脉冲宽度小于一个检测周期,就有 ...

  4. matlab神经网络工具箱创建神经网络

    为了看懂师兄的文章中使用的方法,研究了一下神经网络 昨天花了一天的时间查怎么写程序,但是费了半天劲,不能运行,百度知道里倒是有一个,可以运行的,先贴着做标本 % 生成训练样本集 clear all; ...

  5. SQL提取数据库表名,字段名等信息

    -------提取数据库所有表的表名.字段名 -------在SQLserver 2000中测试 --查询所有用户表所有字段的特征 SELECT D.Name as TableName, A.colo ...

  6. Variable hoisting Function hoisting

    Variable hoisting Another unusual thing about variables in JavaScript is that you can refer to a var ...

  7. Unity3D自带Demo AngryBots路径

    [Unity3D自带Demo AngryBots路径] 1.Windows: C:\Users\Public\Documents\Unity Porjects 2.MacOSX: /Users/Sha ...

  8. Python和其他语言的区别 (简单精辟啊 手打)

    首先是简单 读和写非常容易 免费 免费且开源 社区为专业人士和初学者提供知识和经验的分享交流平台 兼容性 与多平台兼容 面向对象 支持面向对象编程 php面向网络 函数库 python 社区创建了丰富 ...

  9. Zend Studio 10汉化方法

    选择Help菜单->Install New Software...在Work with框中复制此地址:http://download.eclipse.org/technology/babel/u ...

  10. 535. Encode and Decode TinyURL 长短URL

    [抄题]: TinyURL is a URL shortening service where you enter a URL such as https://leetcode.com/problem ...