jQuery编程动画的基本方法实例分析 jquery编程动画的基本方法实例分析视频

   2023-02-08 学习力0
核心提示:今天小编给大家分享一下jQuery编程动画的基本方法实例分析的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、动画jQuery提供了一些

今天小编给大家分享一下jQuery编程动画的基本方法实例分析的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

一、动画

jQuery提供了一些列的动画基本方法,同时也提供了自定动画方案.animate()

.show()

当提供一个 duration(持续时间)参数,.show()成为一个动画方法。.show()方法将为匹配元素的宽度,高度,以及不透明度,同时进行动画操作。

持续时间是以毫秒为单位的,数值越大,动画越慢,不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。

出了上述时间,还可以自定时间,接受毫秒为参数

jQuery默认只提供两个缓冲效果:调用 swing, 在一个恒定的速度进行;调用 linear. 更多的缓动函数要使用的插件

$("button").click(function () {
  $("p").show("slow");
});

.hide()

$("#hidr").click(function () {
  $("div").hide(1000);
});

.fadeIn()

通过淡入的方式显示匹配元素。

$(document.body).click(function () {
  $("div:hidden:first").fadeIn("slow");
});

.fadeOut()

通过淡出的方式显示匹配元素。

$("p").fadeOut("slow");

.animate()

$("#go").click(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});

.slideDown()

用滑动动画显示一个匹配元素。

$("div").slideDown("slow");

.slideUp()

$(document.body).click(function () {
    if ($("div:first").is(":hidden")) {
        $("div").show("slow");
    } else {
        $("div").slideUp();
    }
});

.delay()

设置一个延时来推迟执行队列中后续的项。

$("div.first").slideUp(300).delay(800).fadeIn(400);

.clearQueue()

从列队中移除所有未执行的项。

$("#start").click(function () {
    $("div").slideUp(300).delay(800).fadeIn(400);
})
$("#stop").click(function () {
  var myDiv = $("div");
  myDiv.clearQueue();
  myDiv.stop();
});

.fadeTo()

调整匹配元素的透明度。

透明度的值为:0~1

$(this).fadeTo("fast", Math.random());

以上就是“jQuery编程动画的基本方法实例分析”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注***行业资讯频道。

 
标签: jquery
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 邮箱自动提示Jquery 插件-实战.失败品
    看到很多 SNS 类网站都有 邮箱注册功能. 参考了一下技术过程,触发事件为 focus keyup 和 后缀 mousedown 事件基本匹配过程就可以完成了. 所以写了下面的代码. 对  万一用户 选择错误.目前很多SNS 站都是要 手动删除后另行选择.我就写一个 focus 替换函数. 
    03-08
  • JQuery——事件绑定bind和on的区别
    引言  通过JQuery对目标对象绑定事件我们大部分都是通过$('选择器').事件名()的形式实现,其实对事件的绑定还可以使用on和bind,为了搞明白两者之间的区别特做记录,以备以后查阅。正文  bind和on都是给元素绑定事件用的,但两者在使用时有些差别,我们最
    03-08
  • jQuery select操作
    获取Select选择的Text和Value:$("#select_id").change(function(){//code...});//为Select添加事件,当选择其中一项时触发var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Textvar checkValue=$("#select_id").val(); //获
    03-08
  • React中jquery引用 react 引入css
    React中jquery引用 react 引入css
    在React中引用Jquery比较好玩,获取元素的数据更多1.引入方法举例: 1 import $ from 'jquery'; 23 import { Button } from 'antd'; 45 class testJquery extends React.Component { 67   constructor(props) { 8     super(props); 9 10     this.
    03-08
  • javascript怎么清空一个div里面的内容 jquery
    document.getElementById('BIGDraw').innerHTML = "";$('#BIGDraw').html("");清空div内容  两种都可以 版权声明:本文为博主原创文章,未经博主允许不得转载。
    03-08
  • javascript jQuery 用法 和引用顺序
    引用顺序: 先引css再引js js中先引jQuery,再引jabascript,再引自己写的js 用法:jQuery需要引入一个js文件,并在所有js代码之前  1.找标签:    js: document.getElement....  包含所有的找寻代码     dom对象    jQuery:$(选择器);
    03-08
  • 异步加载统计图组件(jquery+css+div)
    异步加载统计图组件(jquery+css+div)
    操作:http://localhost/test/zimg.html效果: ===============zimg.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/19
    03-08
  • js简单固定table表头及css问题分析。 jquery表头固定列
    js简单固定table表头及css问题分析。 jquery表
    headmeta name="viewport" content="width=device-width" /titleTest02/titlescript src="~/Content/js/jquery-1.7.2.min.js"/scriptscript$(document).ready(function () {$("#tabhead").css("width", $("#MyTable&
    03-08
  • jQuery选择器与CSS选择器
    1. 通过位置选择的几个操作:  :first:默认情况下是相对整个页面来说的第一个,如:li:first表示整个页面的第一个li元素,而ul li:first表示整个页面的第一个li元素,并且是在ul下的子元素;:last:同上了,只是是最后一个而已;:first- child:为每个父元
    03-08
  • 纯CSS实现nav导航栏+jQuery实现article区DIV切换
    纯CSS实现nav导航栏+jQuery实现article区DIV切
    效果图: main.html 代码:1 !DOCTYPE html2 html3 head4 titleMyHomepage/title5 meta charset="utf-8" /6 link type="text/css" rel="stylesheet" href="css/reset.css" /7 link type="text/css" rel="stylesheet" h
    03-08
点击排行