jQuery中的动画效果有哪些

jQuery中的动画效果有:slideDown,slideUp等实现滑动效果;fadeIn,fadeToggle等实现淡入淡出的效果

jQuery有很多方法可以帮助我们在页面上实现很多有趣好玩的动画效果,而且程序代码简单比用原生态的JavaScript代码实现效果更加方便简洁,今天将在文章中详细和大家介绍几种jQuery动画操作的方法,希望对大家的学习有一定的帮助。

jQuery动画

【推荐课程:jQuery动画

滑动效果

slideDown()

可以通过高度变化从下往上增大,并且以滑动的方式显示隐藏的内容

$(".btn2").click(function(){$("p").slideDown();});

登录后复制

slideUp()

可以通过高度变化从上往下减小

$("p").slideUp("slow");

登录后复制

slideToggle([speed],[easing],[fn])

通过高度变化来切换所有匹配元素的可见性

例:快速将段落滑上或滑下,之后弹出一个对话框

$("p").slideToggle("fast",function(){alert("hello world!")

登录后复制

淡入淡出

fadeIn()

通过设置不透明度的变化来实现所有匹配元素的淡入效果

例:用200毫秒快速将段落淡入,之后弹出一个对话框

("p").fadeIn("fast",function(){alert("hello world!");});

登录后复制

fadeOut()

通过设置不透明度的变化来实现所有匹配元素的淡出效果

例:用200毫秒快速将段落淡出,之后弹出一个对话框

$("p").fadeOut("fast",function(){alert("hello world!");});

登录后复制

fadeTo()

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

用200毫秒快速将段落的透明度调整到0.25,大约1/4的可见度,之后弹出一个对话框

$("p").fadeTo("fast", 0.25, function(){alert("hello world!");});

登录后复制

fadeToggle()

通过不透明度的变化来开关所有匹配元素的淡入和淡出效果

例:用200毫秒快速将段落淡入,之后弹出一个对话框

$("p").fadeToggle("fast",function(){alert("hello world!");});

登录后复制

案例:当我们鼠标点击按钮时隐藏的内容显示,并且淡出消失

       
       
点击这里,显示或隐藏
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)
$(function(){ $("#btn").click(function(){ $("#content").slideToggle("slow"); $("#content").fadeToggle("slow"); }); });

登录后复制

未加效果前

Image 11.jpg

添加效果后

GIF1.gif

总结:以上就是本篇文章的全部内容了。希望通过本篇文章能够让大家对jQuery的动画效果有一定的了解以及如何去制作我们想要的动画效果。

以上就是jQuery中的动画效果有哪些的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2736075.html

(0)
上一篇 2025年3月8日 01:20:56
下一篇 2025年2月24日 23:56:58

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论