jquery特殊效果 - fadeIn\fadeOut\hide\show\slide

Devops海洋的渔夫

发布于 2019-05-30 21:58:32

2.4K0

发布于 2019-05-30 21:58:32

特殊效果方法

fadeIn() 淡入

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

    });

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

fadeIn() 淡入 / fadeOut() 淡出 / fadeToggle() 切换淡入淡出

编写一个按钮和div来演示一下效果。

一言不合就写好示例页面的html和样式，如下：

那么下一步写click监听点击按钮，然后触发div使用fadeOut()方法，使得已存在的div消失，如下：

下面再写另一个按钮，用来触发fadeIn()方法，如下：

但是如果要写两个方法来切换的确挺麻烦，那么fadeToggle()这个方法就要隆重登场了。只需要写这个方法就可以完成切换，如下：

hide() 隐藏元素 / show() 显示元素 / toggle() 切换元素的可见状态

上面写了淡入淡出的效果，下面来写一下隐藏和显示元素的效果。

toggle() 切换元素的可见状态

好了，上面这个就是显示和隐藏的切换效果。

show() 显示元素

hide() 隐藏元素

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

          $(".btn1").click(function(){
            $("p").hide();
          });

          $(".btn2").click(function(){
            $("p").show();
          });
          
        });
    </script>
</head>
<body>
    <p>This is a paragraph.</p>
    <button class="btn1">Hide</button>
    <button class="btn2">Show</button>
</body>
</html>

slideDown() 向下展开 / slideUp() 向上卷起 / slideToggle() 依次展开或卷起某个元素

slideDown() 向下展开 / slideUp() 向上卷起

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

          $(".btn1").click(function(){
            $("div").stop().slideDown();
          });

          $(".btn2").click(function(){
            $("div").stop().slideUp();
          });

        });
    </script>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <button class="btn1">SlideDown</button>
    <button class="btn2">SlideUp</button>
    <div>This is a Div</div>
</body>
</html>

注意：这里还使用了stop()方法，主要是用于停止之前触发的动画效果的。