一篇文章带你了解jQuery动画

 更新时间:2021年11月15日 14:32:50   作者:Ianane  
本篇文章主要介绍了jQuery之动画效果,详细的介绍了各种动画特效的用法,有需要的可以了解一下,希望能够给你带来帮助
jQuery提供了一些默认的动画
    控制元素的显示与隐藏	    show()	hide()
	控制元素的透明度	        fadeIn()	fadeOut()
	控制元素的高度		    slideUp()		slideDown()
	自定义动画			    animate()

1.控制元素的显示与隐藏 show() hide()

语法:  

 $("selector").show([speed],[callback]);

参考描述:   

参数一:速度,可选 例如:1000毫秒等等与1秒 fast slow  normal   

参数二:回调函数,可选 show或hide函数执行完之后,要实行的函数

$(function () {
			$(".nav-ul li").on({"mouseover":function () {
					$(this).css("background","pink")
				},"mouseout":function () {
					$(this).css("background","#ff2832")
				}});
			$(".menu-btn").hover(function () {
				$(this).next().show("fast")
			},function () {
				$(this).next().hide("slow")
			})
		})

2.控制元素的透明度 fadeIn() fadeOut()

语法:    

    $("selector").fadeIn([speed],[callback]);
    $("selector").fadeOut([speed],[callback]);

参考描述:

参数一:速度,可选 默认是0  例如:1000毫秒等等与1秒 fast slow  normal

参数二:回调函数,可选 fadeIn或fadeOut执行完以后函数执行完之后,要实行的函数

$(function () {
		$("input[name='fadein_btn']").click(function () {
			$("img:eq(0)").fadeIn(500,function () {
				alert("淡入成功")
			})
		})
		$("input[name='fadeout_btn']").click(function () {
			$("img:eq(0)").fadeOut(1000,function () {
				alert("淡出成功")
			})
		})
	})

3:控制元素的高度 slideUp() slideDown()

slideDown()    使元素逐渐延伸显示

slideUp()        使元素逐渐缩短直至隐藏

语法:  

    $("selector").slideUp([speed],[callback]);
    $("selector").slideDown([speed],[callback]);

参考描述:

参数一:速度,可选 默认是0  例如:1000毫秒等等与1秒 fast slow  normal

参数二:回调函数,可选 slideUp或slideDown执行完以后函数执行完之后,要实行的函数

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • jQuery中$(function() {});问题详解

    jQuery中$(function() {});问题详解

    $(function() {});是$(document).ready(function(){ })的简写,最早接触的时候也说$(document).ready(function(){ })这个函数是用来取代页面中的window.onload;但是今天发现 好像不是这样回事!是在做一个页面载入效果时发现的!
    2015-08-08
  • jQuery中ajax的load()方法用法实例

    jQuery中ajax的load()方法用法实例

    这篇文章主要介绍了jQuery中ajax的load()方法用法,以实例形式较为详细的分析了load()方法的功能、参数及使用技巧,是非常实用的技巧,需要的朋友可以参考下
    2014-12-12
  • jquery cookie的用法总结

    jquery cookie的用法总结

    本篇文章主要是对jquery cookie的用法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • jquery 圆形旋转图片滚动切换效果

    jquery 圆形旋转图片滚动切换效果

    今回给大家介绍个圆形旋转的效果,基于圆形的物理特性,又圆上任意一点可以作为一个控制按钮,然后拖动它来使图片轮换。
    2011-01-01
  • jQuery Layer弹出层传值到父页面的实现代码

    jQuery Layer弹出层传值到父页面的实现代码

    这篇文章主要介绍了jQuery Layer弹出层传值到父页面的实现代码,需要的朋友可以参考下
    2017-08-08
  • jQuery实现选中行变色效果(实例讲解)

    jQuery实现选中行变色效果(实例讲解)

    下面小编就为大家带来一篇jQuery实现选中行变色效果(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • DIY jquery plugin - tabs标签切换实现代码

    DIY jquery plugin - tabs标签切换实现代码

    接触jquery 2,3个月了,一直都未动手写过插件。正好最近比较闲,就打算把一直看不顺眼的项目中现有的tab改造一番(现有的tab未能做成一个控件,copy,past的代码太多)。
    2010-12-12
  • juqery 学习之三 选择器 可见性 元素属性

    juqery 学习之三 选择器 可见性 元素属性

    juqery 学习之三 选择器 可见性 元素属性,需要的朋友可以参考下。
    2010-11-11
  • jquery模拟picker实现滑动选择效果

    jquery模拟picker实现滑动选择效果

    这篇文章主要为大家详细介绍了jquery模拟picker实现滑动选择效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • jQuery常见动画效果实现介绍

    jQuery常见动画效果实现介绍

    这篇文章主要为大家介绍了jQuery编程动画基本实现方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10

最新评论