本篇文章给大家带来的内容是介绍jquery可以实现怎样的特效？jquery特效的使用（代码示例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。【相关视频教程推荐：jquery教程】
1、 jQuery 效果 –隐藏和显示
使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
示例：
My Test JQuery $(function(){ $("#btnHide").click(function(){ $("#myDiv1").hide(); //语法格式：$(selector).hide(speed,callback); //可选参数1：speed 参数规定隐藏/显示的速度，可以取值："slow"、"fast" 或毫秒。 //可选参数2：callback 参数是隐藏或显示完成后所执行的函数名称。 // callback的使用如下，即第2个参数是一个函数，jQuery效果执行完会执行该函数。 // $("#myDiv1").hide(3000,function(){ // alert("myDiv1隐藏了"); // }); }); $("#btnShow").click(function(){ $("#myDiv1").show(); //语法格式：$(selector).show(speed,callback); //可选参数1：speed 参数规定隐藏/显示的速度，可以取值："slow"、"fast" 或毫秒。 //可选参数2：callback 参数是隐藏或显示完成后所执行的函数名称。 }); });
登录后复制
2、 jQuery 效果 – 淡入淡出
(1) fadeIn() 方法用于淡入已隐藏的元素。
(2) fadeOut() 方法用于淡出可见元素。
(3) fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则添加淡入效果。如果元素已淡入，则添加淡出效果。
(4) fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
示例：
My Test JQuery $(function(){ $("#btnfadeIn").click(function(){ $("#myDiv1").fadeIn(); //语法格式：$(selector).fadeIn(speed,callback); //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。 //可选参数2：callback 参数是该效果完成后所执行的函数名称。 }); $("#btnfadeOut").click(function(){ $("#myDiv1").fadeOut(); //语法格式：$(selector).fadeOut(speed,callback); //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。 //可选参数2：callback 参数是该效果完成后所执行的函数名称。 }); $("#btnfadeToggle").click(function(){ $("#myDiv1").fadeToggle(); //语法格式：$(selector).fadeToggle(speed,callback); //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。 //可选参数2：callback 参数是该效果完成后所执行的函数名称。 }); $("#btnfadeTo").click(function(){ $("#myDiv1").fadeTo("slow",0.35); //语法格式：$(selector).fadeTo(speed,opacity,callback); //第一个参数是必须的：传入的值可以是"slow"、"fast" 、毫秒； //第二个参数是必须的：传入值是透明度，取值在0-1之间 //第三个参数是可选的：callback 参数是该效果完成后所执行的函数名称。 }); });
登录后复制
3、jQuery 效果 -滑动
(1) slideDown() 方法用于向下滑动元素。
(2) slideUp() 方法用于向上滑动元素。
(3) slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素已向下滑动，则向上滑动它们。如果元素已向上滑动，则向下滑动它们。
示例：
My Test JQuery $(function(){ $("#btnslideDown").click(function(){ $("#myDiv1").slideDown(); //语法格式：$(selector).slideDown(speed,callback); //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。 //可选参数2：callback 参数是滑动完成后所执行的函数名称。 }); $("#btnslideUp").click(function(){ $("#myDiv1").slideUp(); //语法格式：$(selector).slideUp(speed,callback);; //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。 //可选参数2：callback 参数是滑动完成后所执行的函数名称。 }); $("#btnslideToggle").click(function(){ $("#myDiv1").slideToggle(); //语法格式：$(selector).slideToggle(speed,callback);; //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。 //可选参数2：callback 参数是滑动完成后所执行的函数名称。 }); });
登录后复制
4、jQuery 效果 – 动画
animate() 方法用于创建自定义动画。
示例：
My Test JQuery $(function(){ $("#btn_animate").click(function(){ $("#myDiv1").animate({left:'250px'}); //语法格式：$(selector).animate({params},speed,callback); //第一个参数是必须的：值是定义形成动画的 CSS 属性 //第二个参数是可选的：传入的值是"slow"、"fast" 、毫秒 //第三个参数是可选的：callback 参数是该效果完成后所执行的函数名称 //第一个参数的css属性也可以使用相对值，像下面这样 //$("#myDiv1").animate({left:'250px',height:'+=10px',width:'+=10px'}); }); });
登录后复制
5、jQuery — 停止动画
stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
示例：
My Test JQuery $(function(){ $("#btn_animate").click(function(){ $("#myDiv1").animate({left:'250px'},5000); }); $("#btn_stop").click(function(){ $("#myDiv1").stop(); //语法格式：$(selector).stop(stopAll,goToEnd); //可选参数1：规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。 //可选参数2：规定是否立即完成当前动画。默认是 false。 }); });
登录后复制
6、 jQuery — 链式编程
链式编程：在相同的元素上运行多条 jQuery 命令，一条接着另一条。这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
示例：
My Test JQuery $(function(){ $("#btnLink").click(function(){ $("#myDiv1").css("background-color","yellow").slideUp(2000).slideDown(2000); }); });
登录后复制
总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多jQuery特效，推荐访问：js特效大全！
以上就是jQuery可以实现怎样的特效？jQuery特效的使用（代码示例）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2737213.html
