zoukankan      html  css  js  c++  java
  • 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({
                        "+=150px",height:"+=200px" //宽高无限循环递增
                    })
                })
            })
        </script>
  • 相关阅读:
    6_10 下落的树叶(UVa699)<二叉树的DFS>
    6_9 天平(UVa839)<二叉树的DFS>
    6_8 树(UVa548)<从中序和后序恢复二叉树>
    6_7 树的层次遍历(UVa122)<二叉树的动态创建与BFS>
    6_6 小球下落(UVa679)<完全二叉树编号>
    6_4 破损的键盘(UVa11988)<链表>
    6_3 矩阵链乘(UVa424)<用栈实现简单的表达式解析>
    6_2 铁轨(UVa514)<栈>
    第五周课程总结&试验报告(三)
    第四周课程总结和实验报告
  • 原文地址:https://www.cnblogs.com/amy-1205/p/5853267.html
Copyright © 2011-2022 走看看