jQuery学习第二天——jQuery的常见效果（上）

最新推荐文章于 2021-08-16 12:41:40 发布

羽蒙

最新推荐文章于 2021-08-16 12:41:40 发布

阅读量143

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_43436136/article/details/106477203

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

主要学习了以下几种：
1.隐藏/显示
2.淡入淡出
3.滑动
4.动画
5.stop()
6.Callback()
7.Chaining()

先学习了前四类，在这里总结一下：

隐藏/显示：

主要用到hide()和show()两个方法。
实例1：通过两个按钮来实现显示和隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#hide").click(function () {
            $("#p1").hide();
        });
        $("#show").click(function () {
            $("#p1").show();
        });
    });
</script>
</head>
<body>
<p id="p1">疏疏帘幕映娉婷，初试晓妆新。</p>
<button id="hide">隐藏</button>&nbsp;&nbsp;
<button id="show">显示</button>
</body>
</html>

效果：
在这里插入图片描述实例2：使用toggle()来回切换，点击一次隐藏，再点击一次则显示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#toggle1").click(function () {
            $("#p1").toggle();
        });
    });
</script>
</head>
<body>
<p id="p1">疏疏帘幕映娉婷，初试晓妆新。</p>
<button id="toggle1">隐藏/显示</button>
</body>
</html>

在这里插入图片描述

淡入淡出

jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()

语法：
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

使用fadein进行渐入：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></Script>
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function () {
    $("#div1").fadeIn()
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
    $("#div4").fadeIn(5000);
  });
});
</script>
</head>
<body>
<p>淡入淡出效果：</p>
<button>点击这里进行预览</button>
<div id="div1" style="display:none;">
<p>国破山河在，城春草木深。</p>
</div>
<div id="div2" style="display:none;">
<p>感时花溅泪，恨别鸟惊心。</p>
</div>
<div id="div3" style="display:none;">
<p>烽火连三月，家书抵万金。</p>
</div>
<div id="div4" style="display:none;">
<p>白头搔更短，浑欲不胜簪。</p>
</div>
</body>
</html>

（注意这时要把div的display设置为none）

使用fadeout进行渐出：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></Script>
<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            $("#div1").fadeOut();
            $("#div2").fadeOut("slow");
            $("#div3").fadeOut(3000);
            $("#div4").fadeOut(5000);
        });
    });
</script>
</head>
<body>
<p>淡入淡出效果：</p>
<button>点击这里进行预览</button>
<div id="div1" ">
<p>国破山河在，城春草木深。</p>
</div>
<div id="div2" ">
<p>感时花溅泪，恨别鸟惊心。</p>
</div>
<div id="div3" ">
<p>烽火连三月，家书抵万金。</p>
</div>
<div id="div4" ">
<p>白头搔更短，浑欲不胜簪。</p>
</div>
</body>
</html>

（这时就要把div设置为可见的啦！）

使用toggle：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></Script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
    $("#div4").fadeToggle(5000);
  });
});
</script>
</head>
<body>
<p>淡入淡出效果：</p>
<button>点击这里进行预览</button>
<div id="div1">
<p>国破山河在，城春草木深。</p>
</div>
<div id="div2">
<p>感时花溅泪，恨别鸟惊心。</p>
</div>
<div id="div3">
<p>烽火连三月，家书抵万金。</p>
</div>
<div id="div4">
<p>白头搔更短，浑欲不胜簪。</p>
</div>
</body>
</html>

滑动效果

jQuery 拥有以下滑动方法：
slideDown()——下
slideUp()——上
slideToggle()——来回

向下滑动：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></Script>
<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            $("#div1").slideDown();
        });
    });
</script>
</head>
<body>
<p>滑动效果：</p>
<button>实现向下滑动</button>
<div id="div1" " style="display:none;">
<p>国破山河在，城春草木深。</p>
<p>感时花溅泪，恨别鸟惊心。</p>
<p>烽火连三月，家书抵万金。</p>
<p>白头搔更短，浑欲不胜簪。</p>
</div>
</body>
</html>

向上滑动：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></Script>
<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            $("#div1").slideUp();
        });
    });
</script>
</head>
<body>
<p>滑动效果：</p>
<button>实现向上滑动</button>
<div id="div1" ">
<p>国破山河在，城春草木深。</p>
<p>感时花溅泪，恨别鸟惊心。</p>
<p>烽火连三月，家书抵万金。</p>
<p>白头搔更短，浑欲不胜簪。</p>
</div>
</body>
</html>

来回滑动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></Script>
<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            $("#div1").slideToggle();
        });
    });
</script>
</head>
<body>
<p>滑动效果：</p>
<button>实现来回滑动</button>
<div id="div1" ">
<p>国破山河在，城春草木深。</p>
<p>感时花溅泪，恨别鸟惊心。</p>
<p>烽火连三月，家书抵万金。</p>
<p>白头搔更短，浑欲不胜簪。</p>
</div>
</body>
</html>

动画效果

animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

把div进行移动：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></Script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#div1").click(function () {
            $("#div1").animate({ left: '250px' });
        });
    });
</script>
</head>
<body>
<p>自定义动画效果：</p>

<div  style="position:absolute;"id="div1">
<p>国破山河在，城春草木深。</p>
<p>感时花溅泪，恨别鸟惊心。</p>
<p>烽火连三月，家书抵万金。</p>
<p>白头搔更短，浑欲不胜簪。</p>
</div>
</body>
</html>

运行前：
在这里插入图片描述运行后：
（需要注意的是，在默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。）

同理，也可以进行多个属性的操作：
例如，我想让一个div变大的同时改变其透明度：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></Script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#div1").click(function () {
            $("#div1").animate({
            opacity:'0.5',
            height:'200px',
            width:'600px'});
        });
    });
</script>
</head>
<body>
<p>自定义动画效果：</p>

<div  style="background-color:green;height:100px;width:300px;position:absolute;"id="div1" align="center">
<p style="color: #FFFFFF">我是个盒子</p>
</div>
</body>
</html>

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

羽蒙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习第二天——jQuery的常见效果（上）

主要学习了以下几种：1.隐藏/显示2.淡入淡出3.滑动4.动画5.stop()6.Callback()7.Chaining()隐藏/显示：主要用到hide()和show()两个方法。实例1：通过两个按钮来实现显示和隐藏<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htm
复制链接

扫一扫