Jquery 效果使用详解


Posted in Javascript onNovember 23, 2015

jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!

.hide()

隐藏匹配的元素。

.hide()

这个方法不接受任何参数。

.hide([duration][,complete])

duration

一个字符串或者数字决定动画将运行多久。

complete

在动画执行完时执行的函数。

.hide([duration][,easing][,complete])

duration

一个字符串或者数字决定动画将运行多久。

easing

一个字符串,表示过渡使用哪种缓动函数。

complete

在动画完成时执行的函数。

用法:

$('button').click(function(){


$('p').hide(2000)


});


$("div").click(function(){



$(this).hide(2000,function(){



$(this).remove()



})


}) 

 .show()

显示匹配的元素。

.show()

这个方法不接受任何参数。

.show([duration][,complete])

duration

一个字符串或者数字决定动画将运行多久。

complete

在动画执行完时执行的函数。

.show([duration][,easing][,complete])

duration

一个字符串或者数字决定动画将运行多久。

easing

一个字符串,表示过渡使用哪种缓动函数。

complete

在动画完成时执行的函数。

用法:

 $("button").click(function () {




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


});



$("div").first().show("fast", function showNext() {



$(this).next("div").show("fast", showNext);


});

.toggle()

显示或隐藏匹配的元素。

.toggle()

这个方法不接受任何参数。

.toggle([duration][,complete])

duration

一个字符串或者数字决定动画将运行多久。

complete

在动画执行完时执行的函数。

.toggle([duration][,easing][,complete])

duration

一个字符串或者数字决定动画将运行多久。

easing

一个字符串,表示过渡使用哪种缓动函数。

complete

在动画完成时执行的函数。

用法:

$("button").click(function () {



$("p").toggle();


});


$("button").click(function () {



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


});

.animate()

根据一组css属性,执行自定义动画。

.animate(properties[,duration][,easing][,complete])

properties

一个css 属性和值的对象,动画将根据这组对象移动。

duration(默认:400)

一个字符串或者数字决定动画将运行多久。

easing(默认 swing)

一个字符串,表示过度使用哪种缓动函数。

complete

在动画执行完时执行的函数。

 .animate(properties,options)

properties

一个CSS属性和值的对象,动画将根据这组对象移动。

options

一组包含动画选项的值的集合。

用法:

$("#go").click(function(){


$("#block").animate({




width: "70%",




opacity: 0.4,




marginLeft: "0.6in",




fontSize: "3em",




borderWidth: "10px"



 }, 1500 );


});



$("#right").click(function(){



$(".block").animate({"left": "+=50px"}, "slow");


});

对所有段落应用动画,使其 left 属性变为 50,透明度变为 1(即,不透明,可见),用时 500 毫秒。

$( "p" ).animate({



left: 50, opacity: 1


}, 500 );

.delay()

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

.delay(duration[,queueName])

duration

一个整数,指示的毫秒数,用于设定下一个队列推迟执行的时间。

queueName

一个作为队列名的字符串。

效果:

我们可以在 <div id="foo"> 的 .slideUp() 和 .fadeIn() 动画之间设置800毫秒的延时:

$('#foo').slideUp(300).delay(800).fadeIn(400);

隐藏再显示两个div。其中绿色的div在显示之前,有800毫秒的延时。

$("button").click(function() {



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




$("div.second").slideUp(300).fadeIn(400);

});

.stop()

 停止匹配元素当前正在运行的动画。

 .stop([clearQueue][,jumpToEnd])

clearQueue

一个布尔值,指示是否取消以队列动画,默认 false;

jumpToEnd

一个布尔值指示是否当前动画立即完成。默认false;

 .stop([queue ] [, clearQueue ] [, jumpToEnd ] )

queue

停止动画队列的名称。

clearQueue

一个布尔值,指示是否取消以列队动画。默认 false.

jumpToEnd

一个布尔值指示是否当前动画立即完成。默认false.

用法:

$("#stop").click(function(){


$(".block").stop();



}); //当点击这个运算的时候 立即停止动画。

.fadeIn()

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

.fadeIn([duration][,complete])

duration(默认:400)

 一个字符串或者数字决定动画将运行多久。

complete

在动画完成时执行的函数。

.fadeIn(options)

一组包含动画选项的值的集合。

.fadeIn([duration][,easing][,complete])

duration(默认:400)

一个字符串或者数字决定动画将运行多久。

easing(默认:swing)

一个字符串,表示过渡使用哪种缓动函数

complete

在动画完成时执行的函数。 

用法:

$(".btn2").click(function(){




$("p").fadeIn();


});

.fadeOut()

通过淡出的方式隐藏匹配元素。

.fadeOut([duration][,complete])

duration(默认:400)

一个字符串或者数字决定动画将运行多久。

complete

在动画完成时执行的函数。

.fadeOut(options)

一组包含动画选项的值的集合。

.fadeOut([duration][,easing][,complete])

duration(默认:400)

一个字符串或者数字决定动画将运行多久。

easing(默认:swing)

一个字符串,表示过渡使用哪种缓动函数

complete

在动画完成时执行的函数。

用法:

$(".btn2").click(function(){




$("p").fadeOut();


});

.fadeTo()

 调整匹配元素的透明度。

 .fadeTo(duration,opacity[,complete])

duration

一个字符串或者数字决定动画将运行多久。

opacity

0和1之间的数字表示目标元素的不透明度

complete

在动画完成时执行的函数。

.fadeTo(duration,opacity[,easing][,complete])

duration

一个字符串或者数字决定动画将运行多久。

opacity

0和1之间的数字表示目标元素的不透明度

easing

一个字符串,表示过渡使用哪种缓动函数

complete

在动画完成时执行的函数。

用法:

 $('input').click(function(){





$('#div1').fadeTo("slow",0.2,function(){







$('#div1').css("display","none");





})



})

.fadeToggle()

通过匹配元素的不透明度动画,来显示或者隐藏他们。

.fadeToggle([duration][,easing][,complete])

duration(默认:400)

一个字符串或者数字决定动画将运行多久。

easing(默认:swing)

一个字符串,表示过渡使用哪种缓动函数

complete

在动画完成时执行的函数。

.fadeToggle(opacity)

opacity

一组包含动画选项的值的集合。

用法:

$("input").click(function(){




$('#div1').fadeToggle(2000)


})

.slideDown()

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

.slideDown([duration][,complete])

duration

一个字符串或者数字决定动画将运行多久。

complete

在动画完成时执行的函数。

.slideDown(opacity)

 opacity

 一组包含动画选项的值的集合。

.slideDown([duration][,easing][,complete])

duration

一个字符串或者数字决定动画将运行多久。

easing

一个字符串,表示过度使用哪种缓动函数。

complete

在动画完成时执行的函数。

用法:

 $("input").click(function(){




$('#div1').slideDown(2000)



})

.slideUp()

用滑动动画隐藏一个匹配元素。

.slideUp([duration][,complete])

duration

一个字符串或者数字决定动画将运行多久。

complete

在动画完成时执行的函数。

.slideUp(opacity)

opacity

一组包含动画选项的值的集合。

.slideUp([duration][,easing][,complete])

duration

一个字符串或者数字决定动画将运行多久。

easing

一个字符串,表示过度使用哪种缓动函数。

complete

在动画完成时执行的函数。

用法:

$("input").click(function(){



$('#div1').slideUp(2000)

})

.slideToggle()

用滑动动画显示或隐藏一个匹配的元素。 

.slideToggle([duration][,complete])

duration

一个字符串或者数字决定动画将运行多久。

complete

在动画完成时执行的函数。

.slideToggle(opacity)

opacity

一组包含动画选项的值的集合。

.slideToggle([duration][,easing][,complete])

duration

一个字符串或者数字决定动画将运行多久。

easing

一个字符串,表示过度使用哪种缓动函数。

complete

在动画完成时执行的函数。

效果:

$("input").click(function(){



$('#div1').slideToggle(2000)


})

以上内容是小编给大家介绍的Jquery 效果使用详解,希望大家喜欢。

Javascript 相关文章推荐
jQuery的slideToggle方法实例
May 07 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
Javascript函数的参数
Jul 16 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
微信小程序开发探究
Dec 27 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 #Javascript
jQuery实现简洁的导航菜单效果
Nov 23 #Javascript
Bootstrap每天必学之表格
Nov 23 #Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 #Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 #Javascript
js实现简单计算器
Nov 22 #Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 #Javascript
You might like
实现php加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
php中的登陆login实例代码
2016/06/20 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
asp 取文本框名称代码
2008/12/02 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
python 模拟登陆163邮箱
2020/12/15 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
NET程序员上机面试题
2015/05/23 面试题
社区党总支书记先进事迹材料
2014/01/24 职场文书
基层党支部整改方案
2014/10/25 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL