jQuery学习四—

1.显示，隐藏：

<!DOCTYPE html>
<html>
<head><title>jquery事件</title>
</head>
<script type="text/javascript" src='./js/jquery-3.2.1.min.js'></script>
<script type="text/javascript">$(document).ready(function(){$('#hide').click(function() {$('#p1').hide();});$('#show').click(function() {$('#p1').show();});});</script>
<body>
<p id="p1">看看我显示还是隐藏</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

toggle()切换显示，隐藏：

<!DOCTYPE html>
<html>
<head><title>jquery事件</title>
</head>
<script type="text/javascript" src='./js/jquery-3.2.1.min.js'></script>
<script type="text/javascript">$(document).ready(function(){$('button').click(function() {$('#p1').toggle();});});</script>
<body>
<p id="p1">看看我显示还是隐藏</p>
<button id="hide">隐藏</button>
</body>
</html>

2.淡入淡出：

<script type="text/javascript">$(document).ready(function(){$('button').click(function() {$('#p1').toggle();$('#p1').fadeIn();  // 淡入已隐藏的元素$('#p1').fadeOut();  // 淡出可见元素$('#p1').fadeToggle();  // 在 fadeIn() 与 fadeOut() 方法之间进行切换$("#p1").fadeTo("slow",0.15); // 允许渐变为给定的不透明度（值介于 0 与 1 之间
      });});</script>

3.滑动：

<!DOCTYPE html>
<html>
<head><title>jquery事件</title><style type="text/css"> #panel,#flip{padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;}#panel{padding:50px;display:none;}</style>
</head>
<script type="text/javascript" src='./js/jquery-3.2.1.min.js'></script>
<script type="text/javascript">$(document).ready(function(){$("#flip").click(function(){$("#panel").slideToggle("slow");$("#panel").slideDown("slow");$("#panel").slideUp("slow");});});
</script>
<body>
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>
</body>
</html>

4.动画：

$("button").click(function(){$("div").animate({left:'250px',opacity:'0.5',height:'150px',width:'150px'});
});

5.停止动画：

$("#stop").click(function(){$("#panel").stop();
});

6.Callback:

$("button").click(function(){$("p").hide("slow",function(){alert("段落现在被隐藏了");});
});

7.链：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

转载于:https://www.cnblogs.com/pengsi/p/7904561.html

jQuery学习四——效果相关推荐

jQuery学习之---效果
今天继续学习一下jQuery,主要记录一下jQuery的那些效果显示 1.animate() 函数 animate() 方法执行 CSS 属性集的自定义动画. 该方法通过CSS样式将元素从一个状态改变 ...
jQuery学习之五---效果
哇哇哇~我真的服了我自己,怎么会在写第六篇博文的时候,把第五篇给顶替掉,好气哦真的是,真的是要吐血了,噗噗!! 现在重新萍子来重新补上,蓝瘦香菇~~ 各种效果博主都已添加了GIF动态图,以供方便理解哦 ...
JQuery学习四（过滤选择器）
:first选择第一个元素.$("div:first")进行选择第一个<div> :last 选择最后一个最后一个元素 $("div:last")选 ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
[jQuery学习系列四 ]4-Jquery学习四-事件操作
[jQuery学习系列四 ]4-Jquery学习四-事件操作前言: 今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席云集听道推酷 ...
jQuery学习第二天——jQuery的常见效果（上）
主要学习了以下几种: 1.隐藏/显示 2.淡入淡出 3.滑动 4.动画 5.stop() 6.Callback() 7.Chaining() 先学习了前四类,在这里总结一下: 隐藏/显示: 主要用到h ...
(二)jquery学习----jquery的效果
jquery的效果 jquery的基本效果包括隐藏.显示.切换,滑动,淡入淡出,以及动画等等. 一.隐藏与显示通过调用hide()和show()方法实现. 语法如下: $(selector).hid ...
【jQuery学习】—实现弹幕效果
[jQuery学习]-实现弹幕效果
jQuery学习（四）— jQuery的ready事件和原生JS的load事件的区别
jQuery学习(四)- jQuery的ready事件和原生JS的load事件的区别 jQuery的ready事件和原生JS的load事件的区别: 页面中可以有多个ready事件,而load事件会出现 ...

jQuery学习四——效果

toggle()切换显示，隐藏：

jQuery学习四——效果相关推荐

最新文章

热门文章