`
晓W枫
  • 浏览: 2490 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

jquery 动画学习

阅读更多
     在学习的时候,以前只知道用javascript,去写页面前端,感觉这样比jquery好,但是工作了才发现原因jquery的使用比js效率高很多,很多地方都做了很好的封装,而且还提供了很多的插件,在web前端的时候的确是很好的选择,因为以前没有了解过jquery的动画,当时想的是用js实现,但是想了一下,感觉太 麻烦了,而且还不一定能够实现,最后就去找jquery,没想到jquery却有这样封装好的函数,真是太欣喜了,于是到了w3cschool去学习了简单的教程,嗯,是挺简单的,动画函数其实不多,但是组合起来那就千变万化了
1.显示和隐藏($('p').hide()和$('p').show())语法:($(selecter).hide(speed,callback))
     以前用的最多的是层的显示和隐藏,如果要隐藏某个html元素的话,需要把它们装到层里面去,而且麻烦,但是现在好了,而且还可以设置他们参数为slow($('p').hide("slow");)这样的话看起来就有动态的效果了.
2.第二个函数相对于隐藏和显示还有更简单的一个函数方法$('seleter').toggle(speed,callback);
这个方法相当于只用一个函数方法就可以实现html元素的显示和隐藏了,感觉就像在后台写了一个计数器,i++一样。因为没有去看过源代码,所以不知道后台的实现。
3.(slideUp(speed,callback),slideDown(speed,callback),slideToggle(speed,callback))
     这三个函数是jquery的滑动函数,分别是向下滑动,向上滑动,和切换滑动,都还是比较简单,尤其是在做层的显示和隐藏的效果的时候,很有用,在浏览器的上边和下边,隐藏在那个地方都可以。
4.(fadeIn(speed,callback),fadeOut(speed,callback),fadeTo(speed,opactiy,callback))
     就是jquery的几个淡入淡出的效果了,也还是比较适用,第一个淡入直至完全显示,第二个淡出直至完全消失,第三个显示和淡出到一个什么透明度.
5.就是比较灵活的jquery的自定义的动画了(animate({param},speed,easing,callback))
     第三个参数一般都不填或为null,如果要被动画的html元素动起来,那就必须要设置属性position:relative 或 absolute。
  $("#start").click(function(){
$("#box").animate({height:300},"slow").animate({width:300},"slow").animate({height:100},"slow").animate({width:100},"slow");
  });

分享到:
评论

相关推荐

    .jQuery动画效果

    在“jQuery动画效果”这个主题中,我们将...通过学习和实践这些jQuery动画效果,开发者可以创建出引人入胜的网页和应用程序,提高用户的参与度和满意度。理解如何有效利用jQuery动画,是现代前端开发中不可或缺的技能。

    jquery的动画效果

    jQuery是一个强大的JavaScript库,特别以其简洁的API和丰富的动画效果而闻名。...无论是在网页导航、图片展示还是用户交互上,jQuery动画都是不可或缺的工具。熟练掌握这些技巧,将让你的网页更加生动和引人入胜。

    JQUERY动画导航

    下面我们将详细探讨jQuery动画导航的实现原理、常见效果以及如何创建。 一、jQuery简介 jQuery是由John Resig在2006年创建的,它的核心理念是"写得更少,做得更多"(Write Less, Do More)。jQuery提供了一套简洁的...

    jquery动画特效大全

    学习并熟练掌握这些jQuery动画,开发者不仅可以提升网页的用户体验,还能在设计动态交互时有更多的创新可能。此外,了解如何优化动画性能,如减少DOM操作、使用CSS3硬件加速等技巧,也是提升网站性能的关键。 总的...

    jquery经典实例60例-动画实例

    《jQuery经典实例60例-动画实例》是学习jQuery库中动画效果...在实际项目中,这些jQuery动画实例将大大提升用户体验,增强网站的吸引力。在学习过程中,不断实践和理解每个实例,将有助于更好地掌握jQuery的动画功能。

    jQuery旋转动画按钮

    这个教程非常适合初学者学习,通过这个实践,你可以更深入地理解jQuery和CSS3动画的结合使用,以及如何增强网页的交互性。对于更高级的应用,你还可以结合其他jQuery插件或动画库,如Animate.css,以实现更多样化的...

    jquery实例超炫animate动画效果

    在JavaScript的世界里,jQuery库以其简洁...总结来说,这个主题为我们提供了一个深入学习jQuery动画机制的机会,通过分析和实践这些超炫的`animate`实例,我们可以提升Web开发技能,创造出更加生动、吸引人的网页效果。

    jQuery动画效果多功能菜单

    "jQuery动画效果多功能菜单"是一个专为学习设计的项目,它展示了如何利用jQuery创建出吸引人的、具有动画效果的菜单,以增强用户体验并提升网页的视觉吸引力。 jQuery中的动画功能主要通过几个核心函数来实现,如`...

    jquery动画效果学习笔记(8种效果)

    在学习jQuery动画效果时,首先要知道的是,jQuery为开发者提供了一系列预定义的动画效果函数,这些函数可以用于实现元素的显示、隐藏以及淡入淡出等动态效果。动画效果使得页面元素能够以更流畅和吸引人的方式与用户...

    jQuery动画效果鼠标响应菜单.zip

    《jQuery动画效果与鼠标响应菜单》 在网页设计中,用户界面的交互性和吸引力是至关重要的,其中菜单导航系统作为用户与网站互动的桥梁,其设计尤为重要。本篇将深入探讨"jQuery动画效果多功能菜单"这一主题,它利用...

    jquery手册jquery的学习jquery的学习

    jQuery的学习需要从基础选择器和DOM操作开始,逐步深入到事件处理、动画效果和Ajax交互。配合"LAMP兄弟连"的相关资源,可以提升Web开发的全面技能。最后,使用官方API文档作为工具,能够解决实际开发中的问题,确保...

    jquery动画制作示例图片滚动和飞行乌鸦,车窗效果,非常强大

    这个压缩包文件中的内容,"jquery动画制作示例图片滚动和飞行乌鸦,车窗效果,非常强大",显然展示了如何利用jQuery来实现一些引人注目的视觉效果。 首先,我们来看“图片滚动”效果。在网页设计中,图片滚动通常指的...

    jQuery学习动画效果基础

    jQuery学习动画效果基础 jQuery学习动画效果基础是指使用jQuery库来实现网页中的动画效果。动画效果可以丰富网页的交互性和视觉效果,使用户体验更加流畅和自然。本文将详细介绍jQuery学习动画效果基础,并提供相关...

    jquery经典学习手册

    **jQuery经典学习手册** jQuery,一个轻量级的JavaScript库,因其简洁的API和强大的功能而深受开发者喜爱。本手册将带你逐步深入了解jQuery,从基础到高级,让你全面掌握这个强大的工具。 ### 一、jQuery简介 ...

    JQuery学习网站

    这篇博文链接(https://lxy19791111.iteye.com/blog/163447)可能提供了一些关于jQuery的学习资源,虽然具体内容无法在这里直接展示,但通常这样的博客会涵盖基本概念、选择器、DOM操作、事件处理、效果和动画、Ajax...

    jQuery图片排列动画效果.zip

    对于学习网页开发和JavaScript特效的初学者,这是一个很好的实践案例,可以帮助理解并掌握如何利用jQuery实现动态图片效果。同时,对于设计师和开发者,这样的效果也可以用于各种项目,如产品展示、摄影集网站等,以...

    jquery动画背景图片.rar

    本资源“jquery动画背景图片.rar”显然是一个利用jQuery库实现动态背景图片效果的示例项目。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。 jQuery的动画功能是...

    精选 jquery 学习资料

    jQuery是一款广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本压缩包包含的“精选jQuery学习资料”是针对这一强大的库进行深入学习的重要资源。 首先,我们...

    jQuery动画队列特效代码.zip

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理以及创建复杂的动画效果。...通过学习这个压缩包中的代码,你可以深入理解jQuery动画的工作原理,并能灵活运用到自己的项目中去。

    jquery学习资料大全

    - **PDF文档**:通常会详细阐述jQuery的基本概念、选择器、事件、DOM操作、动画以及AJAX等核心内容,适合系统性学习。 - **教程**:可能包含一系列步骤,指导读者逐步学习jQuery,从安装到实际应用,涵盖各种常见...

Global site tag (gtag.js) - Google Analytics