码迷,mamicode.com
首页 > Web开发 > 详细

jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏

时间:2016-09-08 16:19:23      阅读:4093      评论:0      收藏:0      [点我收藏+]

标签:

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效果- 显示和隐藏 淡入淡出 滑动 隐藏

标签:

原文地址:http://www.cnblogs.com/amy-1205/p/5853267.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!