隐藏/显示：

主要用到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>

效果：

jQuery学习第二天——jQuery的常见效果（上）相关推荐

jQuery源码学习第二天--jQuery的extend扩展
Jquery中的extend扩展一.看下常见的extend扩展: 1: jQuery.extend({ 2: noConflict: function( deep ) { 3: if ( windo ...
小白的jquery学习之路之天猫04 效果 fadeTo animate方法天猫图片滑动效果
效果淡入淡出 fadeTo([[s],o,[e],[fn]]) // 图片的透明度在2秒时间到0.3 $("#dog").fadeTo(2000,0.3); fad ...
jquery学习之tab切换及动画效果，涉及animate()，siblings()
效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
JQUERY学习第二天之制作横纵向导航菜单
$(document).ready(function(){ //页面中的DOM已经装载完成时,执行的代码 $(".main > a").click(function( ...
JQuery学习使用笔记 -- JQuery插件开发
内容转载自 http://www.css88.com/archives/4821 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最 ...
jQuery 学习笔记迭代jQuery对象和非jQuery对象
jQuery提供了一个通用对象迭代器$.each()和一个jQuery集合迭代器.each(),它们是不相同的. 事实上,jQuery还提供了一组更有用的$.map() 和 .map()方法 $.ea ...
jquery学习之路jquery之一：jquery选择元素的方法，太神了 2012.8.2
1.css选择器例子: a 匹配所有连接<a>标签 #sss 所有id为sss的元素 a#sss.yangshi 所有id为sss并且有yangshi类的a元素 p a.sss ...
jQuery学习笔记之jQuery的DOM操作
前期:http://blog.csdn.net/goodshot/article/details/20202019 一.节点的操作 1.查找节点: var $var_1=$("htmltyp ...
吴恩达深度学习deeplearning.ai——第一门课：神经网络与深度学习——第二节：神经网络基础（上）
2.1 二元分类 (Binary Classification) 这周我们将学习神经网络的基础知识,其中需要注意的是,当实现一个神经网络的时候,我们需要知道一些非常重要的技术和技巧.例如有一个包含 m ...

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

隐藏/显示：

淡入淡出

滑动效果

动画效果

jQuery学习第二天——jQuery的常见效果（上）相关推荐

最新文章

热门文章