jquery动画 | 易学教程

jQuery实现动画效果

阅读更多关于 jQuery实现动画效果

jQuery有三种方式显示与隐藏元素 1、默认显示和隐藏的方式 1、show([speed],[easing],[fn])：显示 2、hide([speed],[easing],[fn])：隐藏 3、toggle([speed],[easing],[fn])：切换 2、滑动显示和隐藏 1、slideDown([speed],[easing],[fn])：向下滑动显示 2、slideUp([speed,[easing],[fn]])：向上滑动隐藏 3、slideToggle([speed],[easing],[fn])：切换 3、淡入淡出显示和隐藏 1、fadeIn([speed,[easing],[fn]])：显示 2、fadeOut([speed,[easing],[fn]])：隐藏 3、fadeToggle([speed,[easing],[fn]])：切换 [speed],[easing],[fn] speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn：在动画完成时执行的函数，每个元素执行一次案例 <!DOCTYPE html> <html> <head> <meta charset=

JQuery效果

阅读更多关于 JQuery效果

1.show([speed,[easing],[backFn]]) 　　 speed :三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000); 　　 easing :(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"; 　　 fn: 在动画完成时执行的函数，每个元素执行一次。只有在元素隐藏时，才有效果。例如：$("#div1").show(); 　　　　$("#div1").show(1000); 　　　　$("#div1").show('fast','swing'); 　　　　$("#div1").show("normal",''linear",function(){//执行代码}); 2.hide([speed,[easing],[backFn]]); 参数同上只有在元素显示时，才有效果。 3.toggle([speed,[easing],[backFn]]) 　　speed: 隐藏/显示效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"; 　　easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"; 　　fn:在动画完成时执行的函数，每个元素执行一次。; 　　回调函数可以多个，如backFn1

jQuery效果--show([speed,[easing],[fn]])和hide([speed,[easing],[fn]])

阅读更多关于 jQuery效果--show([speed,[easing],[fn]])和hide([speed,[easing],[fn]])

hide([speed,[easing],[fn]]) 概述隐藏显示的元素这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西参数 [speed],[easing],[fn] speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn : 在动画完成时执行的函数，每个元素执行一次 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ $("p").eq(0).hide(); $("p:eq(1)").hide("slow"); $("p:eq(2)").hide("slow",function(){ $("button").css("color","

jquery插件之无缝轮播

阅读更多关于 jquery插件之无缝轮播

1 //time 2017-10-23 2 //by wen 3 ;(function($, window, document, undefined){ 4 5 $.fn.slideshow = function(options){ 6 !options && (options = {}); 7 var settings = $.extend({ 8 autoplay: 500,//是否自动播放,数字则为自动播放的间隔时间 9 delay: 300,//设置滚动事件，动画延长时间 10 loop: true//是否循环播放 11 }, options); 12 return this.each(function(){ 13 // methods.init.call($(this), settings); 14 var $this = $(this), 15 n = 1,//当前图片索引 16 img_width = $this.width(),//图片宽度 17 $thisbanner = $this.find('.banner'), 18 timer = null;//用于自动播放定时器 19 //如果设置为循环轮播 20 if(settings.loop){ 21 //为了从最后一张到第一张和从第一张到最后一张的无缝过渡eg（有图片1、2、3），则：3、1、2、3、1 22

转：精心挑选的12款优秀 jQuery Ajax 分页插件和教程

阅读更多关于转：精心挑选的12款优秀 jQuery Ajax 分页插件和教程

在这篇文章中，我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件，这些插件都提供了详细的使用教程和演示。Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高，如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。我们一起来看看下面这些优秀的分页插件。 1.Client-side jQuery pagination plugin : jPages jPages 是一款非常不错的客户端分页插件，有很多特色，例如自动播放、按键翻页、延迟加载等等。浏览详情在线演示 2. jPaginate: A Fancy jQuery Pagination Plugin jPaginate 是一款非常精致的分页插件，提供了五种形式的DEMO，支持鼠标悬停翻页功能。浏览详情在线演示 3. SimplePager – jQuery paging plugin SimplePager 是非常简洁的 jQuery 分页插件，用最少的参数配置实现满足需要的分页功能。浏览详情在线演示 4. jQuery ScrollPagination jQuery 滚动翻页插件由 Anderson Ferminiano 开发，可以在项目中免费使用。浏览详情在线演示 5. jqPagination A jQuery pagination plugin

jQuery基础教程（第3版）

阅读更多关于 jQuery基础教程（第3版）

出版社: 人民邮电出版社; 第3版 (2012年4月1日) 外文书名: Learning jQuery Third Edition 丛书名: 图灵程序设计丛书内容简介《jQuery基础教程(第3版)/图灵程序设计丛书》作为《jQuery基础教程(第2版)》的升级版，涵盖了jQuery 1.6.x及1.7.x的全部新特性，《jQuery基础教程(第3版)/图灵程序设计丛书》前6章以通俗易懂的方式介绍了jQuery的核心组件，主要包括jQuery的选择符、事件、动画技术、DOM操作、AJAX支持等。第7章和第8章介绍了jQuery UI及利用jQuery强大的扩展能力开发自定义插件。随后的几章更加深入地探讨了jQuery的各种特性及一些高级技术。值得一提的是，《jQuery基础教程(第3版)/图灵程序设计丛书》的译者新增了附录D，介绍了2011年11月新发布的jQuery1.7的内容。来源： https://www.cnblogs.com/jungle2716/archive/2012/06/20/gufengxi.html

web前端入门到实战：jQuery中的事件、动画、表单应用

阅读更多关于 web前端入门到实战：jQuery中的事件、动画、表单应用

什么是事件? 页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。在事件中经常使用术语 " 触发 " （或 " 激发 " ）常用click(）方法触发 DOM的加载 $(document).ready() 方法与 window.onload () 方法的区别：事件绑定使用bind（）方法为每个匹配元素的特定事件绑定事件处理函数。bind() 方法的调用格式： bind(type,[data], fn ) • type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如 "click" 或 "submit" ，还可以是自定义事件名。 • data: 作为 event.data 属性值传递给事件对象的额外数据对象 • fn : 绑定到每个匹配元素的事件上面的处理函数实例： //事件绑定 $("#btn1").bind("click",function(){ alert("点我触发bind函数"); }) <button id="btn1">点我触发bind函数</button> 使用 jQuery 的 is()方法判断元素是否可见，使用is()方法: alert($("button").parent().is("body")); /* * $("#b1").is(":visible") 判断id为d1的元素是否可见 *

jQuery初识

阅读更多关于 jQuery初识

jQuery初识 jQuery是什么？ jQuery是一个兼容多浏览器的JavaScript库。 jQuery能极大地简化JavaScript编程，它的宗旨就是："Write less,do more." jQuery包含以下内容： HTML元素选取 HTML元素操作 CSS操作 HTML事件函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAX 下载链接： jQuery官网 jQuery对象 jQuery对象就是通过jQuery包装DOM对象后产生的对象， jQuery对象是jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用 jQuery 里的方法：例如$(“#i1”).html()。 $(“#i1”).html()的意思是：获取id值为i1的元素的HTML代码，其中html()是jQuery里的方法。相当于JavaScript中的document.getElementById("i1").innerHTML; 虽然jQuery对象是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery也不能使用jQuery里的方法。 jQuery与JavaScript在申明变量的区别： 1 var $variable = jQuery对象 2 var variable = DOM对象 3

前端基础 jQuery

阅读更多关于前端基础 jQuery

一 jQuery是什么？［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! ［3］它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。二什么是 jQuery 对象？ jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。 jQuery 对象是 jQuery 独有的 . 如果一个对象是 jQuery 对象 , 那么它就可以使用 jQuery 里的方法 : jquery对象和DOM对象 1、jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象。 var $cr = $("#cr"); //jQuery对象 var cr = $cr[0] //DOM对象 alert(cr

40个有用的jQuery技术和教程

阅读更多关于 40个有用的jQuery技术和教程

jQuery确实是一项伟大的技术，通过jQuery的插件，我们可以方便的创建具有更好用户界面的网站。在本文中，将和大家分享40个对你创建更好用户界面的jQuery技术和教程。 1. Custom Animation Banner with jQuery 在该教程中你将学会如何使用jQuery的Easing插件及2D Transform插件创建自定义的动画横幅。教程的想法是将不同的元素以自定义动画的形式融入到横幅中去。查看实例 2. Moving Boxes Carousel with jQuery 你将学会如何创建一个拥有改变面板及缩放面板的按钮的滑块。查看实例 3. Quick Feedback Form – jQuery & PHP 通过jQuery和PHP实现的快速填写反馈表单的实例。查看实例 4. Wijmo – jQuery UI Widgets Wijmo是一个拥有超过30个jQuery UI Widgets的库。查看实例 5. One Page Navigation – jQuery Plugin 这是一个在同一个页面中如何平滑的导航的实例。查看实例 6. RSS Reader With jQuery Mobile 7. Easy Accordion – jQuery Plugin The Easy Accordion plugin by Andrea

订阅 jquery动画