JQuery2_基础下

最新推荐文章于 2024-05-06 10:07:26 发布

gingerMr_程序人生

最新推荐文章于 2024-05-06 10:07:26 发布

阅读量135

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/gingerMr/article/details/117885666

版权

文章目录

动画
- 1. 三种方式显示和隐藏元素
遍历
事件绑定
案例
- 1. 显示隐藏动画
- 2. 抽奖
插件：增强JQuery的功能
- 1. $.fn.extend(object)
- 2. $.extend(object)

动画

1. 三种方式显示和隐藏元素

1.1 默认显示和隐藏方式

1.1.1 show([speed,[easing],[fn]])

1. 参数：
	1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)。
	2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"。
			 swing：动画执行时效果是 先慢，中间快，最后又慢。
			 linear：动画执行时速度是匀速的。
	3. fn：在动画完成时执行的函数，每个元素执行一次。

1.1.2 hide([speed,[easing],[fn]])

1.1.3 toggle([speed],[easing],[fn])

默认显示和隐藏方式代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<style>
    div {
   
        border: 1px solid red;
        width: 700px;
        height: 350px;
        margin: auto;
    }
</style>
<script>
    $(function () {
   
        /*setTimeout(showImg, 3000);
        setTimeout(hidImg, 11000);*/

        setTimeout(toggleImg,3000);
        setTimeout(toggleImg,6000);
    });

    function showImg() {
   
        /*$("img").show("slow","swing",function () {
            alert("图片显示");
        });*/
        $("img").show(5000, "swing");
    }

    function hidImg() {
   
        /*$("img").hide("slow","swing",function () {
             alert("图片隐藏");
         });*/
        $("img").hide(5000, "swing");
    }

    function toggleImg(){
   
        //toggle方法有很多变形方式,可以参考文档。
        //它还会根据元素是否隐藏,来判断是否显示元素。
        //不能设置数字
        $("img").toggle("slow","swing");
    }
</script>
<body>
<div>
    <img src="img/man06.jpg" width="100%" height="100%" style="display: none">
</div>
</body>
</html>

在这里插入图片描述

1.2 滑动显示和隐藏方式

1.2.1 slideDown([speed],[easing],[fn])

1.2.2 slideUp([speed,[easing],[fn]])

1.2.3 slideToggle([speed],[easing],[fn])

滑动显示和隐藏方式代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<style>
    div {
   
        border: 1px solid red;
        width: 700px;
        height: 350px;
        margin: auto;
    }
</style>
<script>
    $(function () {
   
        //setTimeout(slideDownImg, 3000);
        //setTimeout(slideUpImg, 11000);

        setTimeout(slideToggleImg,3000);
        setTimeout(slideToggleImg,9000);
    });

    function slideDownImg() {
   
        /* $("img").slideDown("slow", "swing", function () {
             alert("图片显示")
         });*/
        $("img").slideDown(5000, "swing");
    }

    function slideUpImg() {
   
        /*$("img").slideUp("slow", "swing", function () {
            alert("图片隐藏");
        });*/
        $("img").slideUp(5000, "swing");
    }

    function slideToggleImg() {
   
        //$("img").slideToggle("slow","swing");
        $("img").slideToggle(3000);
    }
</script>
<body>
<div>
    <img src="img/man06.jpg" width="100%" height="100%" style="display:none">
</div>
</body>
</html>

在这里插入图片描述

1.3 淡入淡出显示和隐藏方式

1.3.1 fadeIn([speed],[easing],[fn])

1.3.2 fadeOut([speed],[easing],[fn])

1.3.3 fadeToggle([speed,[easing],[fn]])

淡入淡出显示和隐藏方式代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<style>
    div {
   
        border: 1px solid red;
        width: 700px;
        height: 350px

最低0.47元/天解锁文章

gingerMr_程序人生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery2_基础下

文章目录动画1. 三种方式显示和隐藏元素1.1 默认显示和隐藏方式1.1.1 show([speed,[easing],[fn]])1.1.2 hide([speed,[easing],[fn]])1.1.3 toggle([speed],[easing],[fn])1.2 滑动显示和隐藏方式1.2.1 slideDown([speed],[easing],[fn])1.2.2 slideUp([speed,[easing],[fn]])1.2.3 slideToggle([speed],[easing],
复制链接

扫一扫