JQuery运动特效

       JQuery作为一个强大的JS框架,为我们在实际中避免了很多问题,比如,不会写算法,总得做浏览器的兼容等等。最近用到了JQuery的一些特效,拿出来复习下。

    


常见特效


Fadein()


淡入


 


Fadeout()


淡出


 


slideDown()


向下展开


 


slideUp()


向上卷起


复杂效果


Animate


 


 


stop


 

 

     例如,现在我想做一个这样的效果:界面上有个按钮,当点击这个按钮的时候,div出现,再次点击,div块消失。为div这两个动作添加淡入淡出效果:

 

 

    

        也可以用卷曲效果,并且指定动作完成的时间,人为地将动作控制在一个比较美观的状态。

  如果是鼠标移入时的事件,我们可以使用hover,并添加两个函数用于状态切换:

   但是当我们在浏览器中查看上图代码的效果时,我们会发现,如果我快速移如鼠标,又快速移出,反复几次,即使鼠标离开了,效果还在,这个并不是我们所期望的,这时,我们可以加入stop方法,清除动作的堆栈效果。

  
基于Jquery比JS有着众多的优势,比如:网页元素的选择,方法函数化,链式操作,元素移动,强大创建,方法和事件的超赞写法,感觉框架就是好哇~

时间: 2024-12-24 20:43:57

JQuery运动特效的相关文章

非常出色的jQuery运动特效可以和Flash媲美

要说网页中哪种效果最酷,很多人都会认为只有FLASH才能做出如此流畅酷炫效果,除了Flash外,现在还有一种方法能做出类似的网页效果,那就是著名JavaScript 框架 - jQuery .本文介绍了10个非常出色的 jQuery 运动特效,这些效果可以更有效地展示你的内容. 1. 流感导航菜单 下面的导航菜单,当鼠标在上面移动的时候,会很流畅地垂下解释菜单,当你将鼠标在上面快速左右移动的时候,会怀疑这是 Flash. 2. 转花灯 Roundabout 是一个 jQuery 插件,可以将一组

jquery手风琴特效插件

 这篇文章主要介绍了jquery手风琴特效插件,效果非常棒,需要的朋友可以参考下     手风琴效果是项目中使用频率较高的一种效果,原来项目一直都在用easyui的,临近年末,试着自己写了一个 css样式   代码如下: /* CSS Document */ body { margin: 0 auto; padding: 0 auto; font-size: 9pt; font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif; }

分享精心挑选的23款美轮美奂的jQuery 图片特效插件_jquery

下面向大家分享精心挑选的23款优秀 jQuery 图片特效插件,带给你美轮美奂的图片展示效果.   01. 3D Image Slider 非常非常酷的 3D 图片滑动效果,有五种绚丽的效果演示.     在线演示 下载源码   02. Portfolio Image Navigator 精致的图片导航效果,通过四个方向的箭头控制,适合作品展示的应用场合.     在线演示 下载源码   03. Image Transitions 非常精美的图片切换效果,有 Flip.Multi-flip.Ro

15个款优秀的 jQuery 图片特效插件推荐_jquery

这篇文章向大家推荐15个最佳 jQuery 图片效果插件.jQuery是最流行的Javascript框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片效果. 01. Responsive Image Gallery     02. Image Zoom Tour     03. Automatic Image Montage       04. 3D Image Slider    

精心挑选的15款优秀jQuery 本特效插件和教程_jquery

今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程.jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理,动画以及Ajax交互,帮助 Web 开发人员更快速的实现各种精美的界面效果.   01. 滑动的字符     在线演示 下载源码   02. 鼠标悬停变换效果     在线演示 下载源码   03. 旋转的文本     在线演示 下载源码   04. 滚动变换的文本     在线演示 下载源码  

jQuery图片特效插件Revealing实现拉伸放大_jquery

点击图片,图片拉伸放大显示,效果非常棒! 使用方法: 1.head区域引用文件 jquery.js,photorevealer.js,datouwang.css 2.在文件中加入<!-- 代码 开始 --><!-- 代码 结束 -->区域代码 3.图片个数可以自由增减,增加或者删除<td></td>即可 4.如果图片信息更多,需要更大的空间,可修改photorevealer.js中第36行的数字 核心代码: $(document).ready(functio

利用jquery动画特效和css打造的侧边弹出垂直导航_jquery

这是一款利用jquery动画特效和css打造的侧边弹出垂直导航,整个弹出过程比较流畅,而且代码很简单,如果你正在寻找一款带动画的垂直导航,那么可以试试这个.下面是效果截图:   HTML源码: 复制代码 代码如下: <title>Jquery+CSS侧边弹出垂直导航</title> <style type="text/css"> html, body, ul, li { margin: 0; padding: 0; border: 0; outlin

jQuery动画特效实例教程_jquery

本文以实例形式详细讲述了jQuery动画特效的实现方法.分享给大家供大家参考之用.具体方法如下: 1.自制折叠内容块 内容块如下: <div class="module"> <div class="caption"> <span>标题</span> <img src="rollup.gif" alt="rollup" title="rolls up this mo

Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)_jquery

这篇文章主要介绍了jQuery实现幻灯片焦点图,可实现非常炫目时尚的幻灯片效果,非常具有实用价值,基本能满足你在网页上使用幻灯片(焦点图)效果,需要的朋友可以参考下 幻灯片效果描述:与前两节不同的是,这款特效可以打开页面随机选择切换方式(方向)   运行效果截图如下: 具体代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <