jQuery效果（隐藏和显示）

最新推荐文章于 2024-06-11 08:19:30 发布

努力做一只合格的前端攻城狮

最新推荐文章于 2024-06-11 08:19:30 发布

阅读量7.7k

点赞数 11

分类专栏： Javascript 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/shao_xuan_/article/details/122323703

版权

Javascript 专栏收录该内容

25 篇文章 3 订阅

订阅专栏

jQuery效果解析

隐藏和显示
- hide()和show()
- jQuery toggle()
淡入淡出
滑动
自定义动画
- jQuery animate() 方法
停止动画
- jQuery stop() 方法

隐藏和显示

hide()和show()

hide()：隐藏
show()：显示

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

callback 参数是隐藏或显示完成后所执行的函数名称。

例如：我没通过显示和隐藏按钮来设置图片的隐藏和显示，并给提示信息。

实现过程：添加两个按钮分别实现显示和隐藏功能，再设置一个div用于提示隐藏或者显示。

实现代码：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script src="../Animation/jquery.js"></script>
</head>
<body>
    <img src="../../images/39.PNG">
    <div></div>
    <button class="but1">隐藏</button>
    <button class="but2">显示</button>
    <script src="../Animation/Hide.js"></script>
</body>
</html>

js部分：

//获取元素并绑定click事件
$(function(){
    $(".but1").bind("click",function(){
        $("img").hide(1000,function(){
            $("div").text("我被隐藏了")
        });
    })
    $(".but2").bind("click",function(){
        $("img").show(1000,function(){
            $("div").text("我显示了")
        });
    })
})

效果如下：
在这里插入图片描述

jQuery toggle()

使用 toggle() 方法来切换 hide() 和 show() 方法。

语法：

$(selector).toggle(speed,callback);

speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

callback 参数是 toggle() 方法完成后所执行的函数名称。

例如，上诉例子的另一种写法。

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script src="../Animation/jquery.js"></script>
</head>
<body>
    <img src="../../images/39.PNG">
    <div></div>
    <button class="but">隐藏/显示</button>
    <script src="../Animation/Hide.js"></script>
</body>
</html>

js部分:

$(function(){
    let flag = true;
    $(".but").bind("click",function(){
        $("img").toggle(1000,function(){
            flag == true?$("div").text("我被隐藏了"):$("div").text("我显示了");
            flag = !flag;
        });
    })
})

效果如下：
在这里插入图片描述

淡入淡出

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

语法：

$(selector).fadeIn(speed,callback);

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

语法：

$(selector).fadeOut(speed,callback);

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法：

$(selector).fadeToggle(speed,callback);

speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

callback 参数是完成后所执行的函数名称。

jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法：

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

上述四种方法用法如下：

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script src="../Animation/jquery.js"></script>
</head>
<style>
    img{
        width: 200px;
        height: 100px;
    }
</style>
<body>
    <img src="../../images/39.PNG">
    <div></div>
    <button class="but1">淡出</button>
    <button class="but2">淡入</button>
    <button class="but3">淡出/淡入</button>
    <button class="but4">透明度</button>
    <script src="../Animation/fadein.js"></script>
</body>
</html>

js部分：

$(function(){
    let flag = true;
    $(".but1").bind("click",function(){
        $("img").fadeOut(1000,function(){
            $("div").text("这是淡出效果")
        });
    })

    
    $(".but2").bind("click",function(){
        $("img").fadeIn(1000,function(){
            $("div").text("这是淡入效果")
        });
    })

   
    $(".but3").bind("click",function(){
        $("img").fadeToggle(1000,function(){
            flag == true?$("div").text("这是淡出效果"):$("div").text("这是淡入效果");
        });
    })

    $(".but4").bind("click",function(){
        $("img").fadeTo(1000,0.5,function(){
            $("div").text("这是透明效果")
        });
    })
})

效果如下：
在这里插入图片描述

滑动

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

语法：

$(selector).slideDown(speed,callback);

jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

语法：

$(selector).slideUp(speed,callback);

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

语法：

$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

上诉三种方法用法如下：

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script src="../Animation/jquery.js"></script>
</head>
<style>
    img{
        width: 200px;
        height: 100px;
    }
</style>
<body>
    <img src="../../images/39.PNG">
    <div></div>
    <button class="but1">向上滑动</button>
    <button class="but2">向下滑动</button>
    <button class="but3">向上/向下</button>
    <script src="../Animation/slide.js"></script>
</body>
</html>

js部分：

$(function(){
    let flag = true;
    $(".but1").bind("click",function(){
        $("img").slideUp(1000,function(){
            $("div").text("这是向上滑动效果")
        });
    })

    
    $(".but2").bind("click",function(){
        $("img").slideDown(1000,function(){
            $("div").text("这是向下滑动效果")
        });
    })

   
    $(".but3").bind("click",function(){
        $("img").slideToggle(1000,function(){
            flag == true?$("div").text("这是向上滑动效果"):$("div").text("这是向下滑动效果");
        });
    })
})

效果如下：
在这里插入图片描述

自定义动画

jQuery animate() 方法

jQuery animate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

1、操作HTML元素时，所有 HTML 元素都有一个静态位置，且无法移动。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

如将一个div向右移动

<!DOCTYPE html>
<html>

<head>
    <script src="../Animation/jquery.js"></script>
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("div").animate({ left: '500px' });
            });
        });
    </script>
</head>

<body>
    <button>向右移动</button>
    <div style="background:red;height:100px;width:100px;position:absolute;">
    </div>

</body>

</html>

效果如下：

在这里插入图片描述
2、可以用 animate() 方法来几乎可以操作所有 CSS 属性吗，当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名（如使用paddingLeft 而不是 padding-left）

对CSS属性操作如下：

<!DOCTYPE html>
<html>

<head>
    <script src="../Animation/jquery.js"></script>
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("div").animate({ left: '200px',width:"200px",height:"200px",opacity:"0.5"});
            });
        });
    </script>
</head>

<body>
    <button>开始动画</button>
    <div style="background:red;height:100px;width:100px;position:absolute;">
    </div>

</body>

</html>

在这里插入图片描述

停止动画

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

用法如下：

<!DOCTYPE html>
<html>
<head>
<script src="../Animation/jquery.js">
</script>
<script> 
$(document).ready(function(){
  $("#start").click(function(){
    $("div").animate({left:'100px'},2000);
    $("div").animate({height:"200px",width:"200px"},23000);
  });
  
  $("#stop").click(function(){
    $("div").stop();
  });

  $("#stop2").click(function(){
    $("div").stop(true);
  });

  $("#stop3").click(function(){
    $("div").stop(true,true);
  });
  
});
</script> 
</head>
<body>
    <!-- "开始" 按钮会启动动画。 -->
<button id="start">开始</button>
<!-- "停止" 按钮会停止当前活动的动画，但允许已排队的动画向前执行。 -->
<button id="stop">停止</button>
<!-- "停止所有" 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。 -->
<button id="stop2">停止所有</button>
<!-- "停止但要完成" 会立即完成当前活动的动画，然后停下来。 -->
<button id="stop3">停止但要完成</button>
<div style="background:red;height:100px;width:100px;position:absolute;"></div>

</body>
</html>