jQuery 中的动画特效

jQuery 吸引我的就是他的动画机制，可能也吸引了无数后台开发和前台开发人员，下面我们一起来看看：

1、show() 和 hide() 方法

show() 和 hide() 方法是 jQuery 中最基本的方法，他们的作用是对某一或某些元素的显示或隐藏：

   1:  $("#input").focus(function(){

   2:      $(this).hide();

   3:  });

   4:  $("#input").blur(function(){

   5:      $(this).show();

   6:  }););

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }上段代码的作用是当 id 为 input 的元素得到焦点则隐藏，失去焦点则显示。

上段代码的显示与隐藏是非常生硬的，要实现优雅的动画效果，我们仅需要在 show() 和 hide() 方法中传入参数即可，参数有 slow、normal、fast 等字符串参数，或者直接传入动画持续时间的毫秒数。我们可以将代码改写如下实现优雅的动画效果：

   1:  $("#input").focus(function(){

   2:      $(this).hide(2000);

   3:  });

   4:  $("#input").blur(function(){

   5:      $(this).show("fast");

   6:  });

jQuery 中的动画特效相关推荐

html 萤火虫特效,jquery萤火虫飞舞动画特效插件
这是一款jquery萤火虫飞舞动画特效插件.通过该插件,你可以制作出萤火虫满屏飞舞的效果,你可以指定萤火虫的大小.数量.颜色和透明度等属性. 使用方法在页面中引入jquery和jquery.fire ...
jQuery中的动画理论干货
[jQuery中的动画] 通过jQuery动画能够轻松地为页面添加精彩的视觉效果 [show()方法和hide()方法] 1.show()方法和hide()方法是jQUERY中最基本的动画方法,相当于 ...
JQuery中的动画效果
show() hide() slideUp slideDown fadeIn fadeOut animate : 自定义动画 JQuery中的动画效果.html <!DOCTYPE html&g ...
Vue实战项目开发--Vue中的动画特效
项目的源代码在GitHub上:点击查看目录 vue中的css动画原理在Vue中使用Animate.css库在Vue中同时使用过渡属性和动画 Vue中的Js动画与Velocity.js的结合 Vu ...
图片滚动插件+html5,超赞的jQuery图片滑块动画特效代码汇总
在网站开发过程中,特别是前端开发这块,经常会使用到很多图片滑块动画,也就是一些基于jQuery和HTML5的焦点图插件.本文将为大家收集10个超赞的jQuery图片滑块动画,这些现成的jQuery插件 ...
php 图片动画代码大全,超赞的jQuery图片滑块动画特效代码汇总_jquery
在网站开发过程中,特别是前端开发这块,经常会使用到很多图片滑块动画,也就是一些基于jQuery和HTML5的焦点图插件.本文将为大家收集10个超赞的jQuery图片滑块动画,这些现成的jQuery插件 ...
jQuery中的动画
一.基本动画 1.show()方法和hide()方法:改变display属性为一个元素调用hide()方法,会将该元素的display样式改为"display:none". $( ...
玩转Jquery中的动画效果(animate方法)
jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画. 语法: $(selector).animate({params},speed,callba ...
Jquery中关于动画的一些操作函数
首先是介绍函数: 第一个函数是: slideDown()是用于向下滑动元素.完整的函数是这样的slideDown(speed,callback); speed是规定效果的时长. callback是滑动 ...

jQuery 中的动画特效

1、show() 和 hide() 方法

jQuery 中的动画特效相关推荐

最新文章

热门文章