当前位置:  编程技术>WEB前端

jquery常用特效方法使用示例

    来源: 互联网  发布时间:2014-08-25

    本文导语:  1. jQuery fadeIn() 用于淡入已隐藏的元素。 语法: 代码如下:$(selector).fadeIn(speed,callback); 实例: 代码如下:$("button").click(function(){  $("#div1").fadeIn();  $("#div2").fadeIn("slow");  $("#div3").fadeIn(3000);}); 2. jQuery fadeOut() 方法用于淡出可见元素...

1. jQuery fadeIn() 用于淡入已隐藏的元素。

语法:

代码如下:

$(selector).fadeIn(speed,callback);

实例:

代码如下:

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

2. jQuery fadeOut() 方法用于淡出可见元素。

语法:

代码如下:

$(selector).fadeOut(speed,callback);

3.jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

语法:

代码如下:

$(selector).fadeToggle(speed,callback);

实例:$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

4.。语法:

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。实例

代码如下:

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

  $("#div1").fadeTo("slow",0.15);

 $("#div2").fadeTo("slow",0.4);

 $("#div3").fadeTo("slow",0.7);

});

5. jQuery slideDown() 方法用于向下滑动元素。

语法:

代码如下:

$(selector).slideDown(speed,callback);

代码如下:

$("#flip").click(function(){
  $("#panel").slideDown();
});

6. jQuery slideUp() 方法用于向上滑动元素。

语法:

代码如下:

$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

7. jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动,则 slideToggle() 可向上滑动它们。

如果元素向上滑动,则 slideToggle() 可向下滑动它们。

代码如下:

$(selector).slideToggle(speed,callback);

8. jQuery animate() 方法用于创建自定义动画。

语法:

代码如下:

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:

也可以定义一组animate,实现队列功能。

下面的例子演示 animate() 方法的简单应用;它把

元素移动到左边,直到 left 属性等于 250 像素为止:

实例

代码如下:

$("button").click(function(){
  $("div").animate({left:'250px'});
});
 

9. jQuery stop()方法用于停止动画或效果,在它们完成之前

10.当动画 100% 完成后,即调用 Callback 函数。

典型的语法:

代码如下:

$(selector).hide(speed,callback)

11. jQuery 方法链接

有些元素只要获取一遍就可以,所以可以利用链接对方法追加。

就是方法点方法。如

代码如下:

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

    
 
 

您可能感兴趣的文章:

  • jQuery定时器插件 jQuery Timers应用示例
  • jquery打开dialog的简单示例
  • jQuery animate方法定位页面具体位置(示例)
  • jQuery设置input type值示例
  • jquery弹窗代码示例
  • jquery的父子兄弟节点查找示例代码
  • jquery获取第几个元素方法示例 jquery选择器
  • jquery遍历checkbox简单示例
  • jquery动态添加option示例
  • Jquery定时器的简单示例
  • JQuery获取上传文件大小(示例)
  • Jquery在指定DIV加载HTML示例代码
  • jQuery获得内容和属性示例代码
  • jQuery的each终止或跳过示例代码
  • jQuery获得内容和属性方法及示例
  • jquery根据name属性查找示例
  • jQuery find与children方法示例
  • jQuery回车键绑定点击事件示例
  • jQuery 滚动示例插件 kinetic
  • jQuery设置CSS属性(示例)
  • jQuery特效字体插件 Font effect
  • jQuery特效插件 jSlickmenu
  • jQuery 文字特效 Arctext
  • jquery特效 table鼠标滑过变色的实现代码
  • JQuery特效代码 右下角广告窗体(slideDown slideUp)
  • JQuery特效-跟着鼠标走的Div
  • JQuery特效动画淡入淡出 两个ul标签中li互相移动
  • Jquery特效 评分代码(星级评分)
  • jquery宽屏特效之可关闭两边飘浮对联广告
  • jquery动画特效,jquery动画实例教程
  • jQuery简易图片放大特效示例代码
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery常用ui(dialog...) jquery widget
  • 常用 jQuery 插件 jquery_plugins
  • jquery常用操作小结
  • jquery中each方法示例和常用选择器
  • Jquery常用方法小结
  • jquery刷新页面代码及js常用函数汇总
  • jquery表单提交数据常用代码
  • JQuery对表格进行操作的常用技巧总结
  • jQuery页面加载初始化常用方法
  • jQuery页面加载初始化常用的三种方法
  • Jquery实现的一种常用高亮效果示例代码
  • jquery each的几种常用的使用方法示例
  • JQuery数字类型验证常用正则表达式
  • 常用的JQuery数字类型验证正则表达式整理
  • jquery常用代码26个
  • 常用jQuery选择器总结
  • Jquery常用选择器的几点知识
  • jQuery常用操作方法及常用函数总结
  • jquery中的常用事件bind、hover、toggle等示例介绍
  • jQuery控制TR显示隐藏的三种常用方法
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3