首页 > 代码库 > jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏
jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏
jQuery 效果- 隐藏和显示:hide() 和 show()
规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒
您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
parents 找到每个span元素的所有祖先元素。 $("span").parents()
找到每个span的所有是p元素的祖先元素。 $("span").parents("p")
1 <script> 2 $(function(){ 3 $("button").click(function(){ 4 $("p").hide(800); 5 }) 6 }) 7 $(function(){ 8 $("button").click(function(){ 9 $("p").toggle();10 })11 })12 $(document).ready(function(){13 $(".ex").click(function(){14 $(this).parents(".ex").hide("slow");15 });16 });17 </script>
jQuery 效果- 淡入淡出:
jQuery fadeIn() 用于淡入已隐藏的元素。
jQuery fadeOut() 方法用于淡出可见元素。
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
<script> $(function(){ $("button").click(function(){ $("div1").fadeToggle(2000); }) }) $(function(){ $("button").click(function(){ $(".div1").fadeTo("slow", 0.45); }) })</script>
jQuery 效果- 滑动:
jQuery slideDown() 方法用于向下滑动元素。
jQuery slideUp() 方法用于向上滑动元素。
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
<script> $(function(){ $(".div").click(function(){ $(".div2").slideToggle("slow"); }) }) $(function(){ $(".div").slideUp("fast",function(){ alert("456789"); }) }) </script>
jQuery 效果- 动画:
jQuery animate() 方法允许您创建自定义的动画。
jQuery stop() 方法用于停止动画或效果
Callback 函数在当前动画 100% 完成之后执行。
<script> $(function(){ $("button").click(function(){ $("div").animate({left,‘200px‘}) $("div").animate({ width:"+=150px",height:"+=200px" //宽高无限循环递增 }) }) }) </script>
jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。