主要内容：
1、显示与隐藏效果
2、滑动效果
3、淡入与淡出效果
4、动画效果
5、弹出广告效果
一、显示与隐藏
显示与隐藏即 show() 和 hide() ，能够控制元素显示或隐藏。
实例：
<script type="text/javascript"> ???var isShow = true; ???$(‘#btn‘).click(function () { ???????if(isShow){ ???????????$(‘.box‘).show(3000,function () { ???????????????$(‘.box‘).text(‘盒子现身了‘); ???????????????isShow = false; ???????????????$(‘#btn‘).text(‘隐藏‘); ???????????}) ???????} ???????else{ ???????????$(‘.box‘).hide(2000,function () { ???????????????$(‘.box‘).text(‘‘); ???????????????isShow = true; ???????????????$(‘#btn‘).text(‘显示‘); ???????????}) ???????} ???})</script>完整代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>jQuery的效果</title> ???<style type="text/css"> ???????.box{ ???????????width: 300px; ???????????height:200px; ???????????border:2px solid gold; ???????????display: none; ???????} ???</style></head><body> ???<div class="box"> ???</div> ???<button id="btn">显示</button></body><script src="../jquery-3.2.1.js"></script><script type="text/javascript">// ???$(‘#btn‘).click(function () {// ???????$(‘.box‘).css(‘display‘,‘block‘);// ???}); ???// jQuery提供了一些方法，如show(),hide() 控制元素显示或隐藏 ???var isShow = true; ???$(‘#btn‘).click(function () { ???????if(isShow){ ???????????$(‘.box‘).show(3000,function () { ???????????????$(‘.box‘).text(‘盒子现身了‘); ???????????????isShow = false; ???????????????$(‘#btn‘).text(‘隐藏‘); ???????????}) ???????} ???????else{ ???????????$(‘.box‘).hide(2000,function () { ???????????????$(‘.box‘).text(‘‘); ???????????????isShow = true; ???????????????$(‘#btn‘).text(‘显示‘); ???????????}) ???????} ???})</script></html>View Code
二、滑动效果
有两种实现方式，即 slideDown()/slideUp() 和 slideToggle().
第一种方式：使用 slideDown() 和 slideUp().
实例：
<script type="text/javascript"> ???$(document).ready(function () { ??????$(‘#btn‘).hover(function () { ??????????$(‘#box‘).slideDown(2000,function () { ??????????????$(this).text(‘大吉大利，今晚吃鸡...‘); ??????????}); ??????},function () { ??????????$(‘#box‘).slideUp(4000,function () { ??????????????$(this).text(‘‘); ??????????}); ??????????}) ???})</script>完整代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>slide滑动效果</title> ???<style type="text/css"> ???????#box{ ???????????width:300px; ???????????height:300px; ???????????border:2px solid greenyellow; ???????????display: none; ???????} ???</style></head><body> ???<div id="box"></div> ???<button id="btn">显示</button></body><script src="../jquery-3.2.1.js"></script><script type="text/javascript"> ???$(document).ready(function () { ??????$(‘#btn‘).hover(function () { ??????????$(‘#box‘).slideDown(2000,function () { ??????????????$(this).text(‘大吉大利，今晚吃鸡...‘); ??????????}); ??????},function () { ??????????$(‘#box‘).slideUp(4000,function () { ??????????????$(this).text(‘‘); ??????????}); ??????????}) ???})</script></html>第二种方式：使用 slideToggle() 。
实例：
<script type="text/javascript"> ???$(document).ready(function () { ??????????isShow = true; ???????$(‘#btn‘).click(function () { ???????????$(‘#box‘).slideToggle(3000,function () { ???????????????if(isShow){ ??????????????????$(‘#btn‘).text(‘隐藏‘); ??????????????????isShow = false; ???????????????} ???????????????else{ ???????????????????$(‘#btn‘).text(‘显示‘); ???????????????????isShow = true; ???????????????} ???????????}); ???????}) ???})</script></html>完整代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>slide滑动效果</title> ???<style type="text/css"> ???????#box{ ???????????width:300px; ???????????height:300px; ???????????border:2px solid greenyellow; ???????????display: none; ???????} ???</style></head><body> ???<div id="box"></div> ???<button id="btn">显示</button></body><script src="../jquery-3.2.1.js"></script><script type="text/javascript"> ???$(document).ready(function () { ???????isShow = true; ???????$(‘#btn‘).click(function () { ???????????$(‘#box‘).slideToggle(3000,function () { ???????????????if(isShow){ ??????????????????$(‘#btn‘).text(‘隐藏‘); ??????????????????isShow = false; ???????????????} ???????????????else{ ???????????????????$(‘#btn‘).text(‘显示‘); ???????????????????isShow = true; ???????????????} ???????????}); ???????}) ???})</script>View Code
三、淡入和淡出效果
1、几对效果，fadeIn / fadeOut，fadeTo，fadeToggle。
??????$(selector).fadeIn(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。 ???????fadeOut() 方法用于淡出可见元素。$(selector).fadeOut(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。 ???????fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。 ???????$(selector).fadeToggle(speed,callback); ???????fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。$(selector).fadeTo(speed,opacity,callback); ???????必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 ???????fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。 ???????可选的 callback 参数是该函数完成后所执行的函数名称。
2、fadeIn / fadeOut 实例（fadeTo表示最终效果，配合淡入淡出使用）：
<script type="text/javascript"> ???$(document).ready(function () { ???????????// 当鼠标从元素上移开时，改变元素的显示状态 ??????$(‘#btn‘).mouseout(function(){ ??????????$(‘#box‘).fadeIn(3000); ?// ?fadeIn() 用于淡入已隐藏的元素。 ??????????//$(‘#box‘).fadeIn(‘slow‘); ??????????$(‘#box‘).fadeOut(1000); // 淡出 ??????????$(‘#box‘).fadeTo(2000,0.3); // 最终状态 ??????}); ???})</script>完整代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>fade淡入淡出</title> ???<style type="text/css"> ???????#box{ ???????????width:300px; ???????????height:300px; ???????????border:2px solid #b3d7ff; ???????????display:none; ???????} ???</style></head><body> ???<div id="box"> ???</div> ???<button id="btn">显示</button></body><script src="../jquery-3.2.1.js"></script><script type="text/javascript"> ???$(document).ready(function () { ???????// 当鼠标从元素上移开时，改变元素的显示状态 ??????$(‘#btn‘).mouseout(function(){ ??????????$(‘#box‘).fadeIn(3000); ?// ?fadeIn() 用于淡入已隐藏的元素。 ??????????// $(‘#box‘).fadeIn(‘slow‘); ??????????$(‘#box‘).fadeOut(1000); // 淡出 ??????????$(‘#box‘).fadeTo(2000,0.3); // 最终状态 ??????}); ???})</script></html>3、fadeToggle实例
<script type="text/javascript"> ???$(document).ready(function () { ???????$(‘#btn‘).click(function(){ ???????????$(‘#box‘).toggle(3000); ???????????$("#box").text("我会变身！"); ???????????$("#box").fadeTo(2000,0.3); ???????}) ???})</script>完整代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>fade淡入淡出</title> ???<style type="text/css"> ???????#box{ ???????????width:300px; ???????????height:300px; ???????????border:2px solid #b3d7ff; ???????????display:none; ???????} ???</style></head><body> ???<div id="box"> ???</div> ???<button id="btn">显示</button></body><script src="../jquery-3.2.1.js"></script><script type="text/javascript"> ???$(document).ready(function () { ??????$(‘#btn‘).click(function(){ ???????????$(‘#box‘).toggle(3000); ???????????$("#box").text("我会变身！"); ???????????$("#box").fadeTo(2000,0.3); ???????}) ???})</script></html>View Code
四、动画效果
关于动画效果，这里给大家介绍两种玩法。
玩法一：无延迟动画，即打开网页或点击接触选项等情况下，立即出现对应动画。
实例：
script type="text/javascript"> ???$(document).ready(function () { ??????$(‘#start‘).click(function () { ??????????$(‘#box‘).animate({ ??????????????width:‘300px‘, ??????????????height:‘300px‘, ??????????},10000) ??????}); ???????$(‘#stop‘).click(function () { ???????????$(‘#box‘).stop() ???????}) ???})</script>完整代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>animate动画</title> ???<style type="text/css"> ???#box{ ???????width:100px; ???????height:100px; ???????border:2px solid mediumspringgreen; ???????position: absolute; ???????font-size:14px; ???????text-align: center; ???????line-height: 100px; ???} ???</style></head><body> ???<button id="start">动画</button> ???<button id="stop">停止</button> ???<div id="box"> ???????hello,everyone! ???</div></body><script src="../jquery-3.2.1.min.js"></script><script type="text/javascript"> ???$(document).ready(function () { ??????$(‘#start‘).click(function () { ??????????$(‘#box‘).animate({ ??????????????width:‘300px‘, ??????????????height:‘300px‘, ??????????},10000) ??????}); ???????$(‘#stop‘).click(function () { ???????????$(‘#box‘).stop() ???????}) ???})</script></html>玩法二：延迟播放动画，即 delay()。
实例：
<script type="text/javascript"> ???$(document).ready(function () { ???????$(‘#box‘).animate({ ???????????left:‘200px‘, ???????????top:‘300px‘ ???????}).delay(2000).animate({top:‘400px‘}); // delay()是指的延迟 ???})</script>完整代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>animate动画</title> ???<style type="text/css"> ???#box{ ???????width:100px; ???????height:100px; ???????border:2px solid mediumspringgreen; ???????position: absolute; ???????font-size:14px; ???????text-align: center; ???????line-height: 100px; ???} ???</style></head><body> ???<button id="start">动画</button> ???<button id="stop">停止</button> ???<div id="box"> ???????hello,everyone! ???</div></body><script src="../jquery-3.2.1.min.js"></script><script type="text/javascript"> ???$(document).ready(function () { ???????$(‘#box‘).animate({ ???????????left:‘200px‘, ???????????top:‘300px‘ ???????}).delay(2000).animate({top:‘400px‘}); // delay()是指的延迟 ???})</script></html>View Code
五、弹出广告效果
综合运用前几个方法，就可以得到弹出的广告效果。
实例：
???<script type="text/javascript"> ???????$(document).ready(function () { ???????????$(‘#box‘).slideDown(‘normal‘).slideUp(‘fast‘).fadeIn(2000).click(function () { ???????????????$(this).fadeOut(1000); ???????????}) ???????}) ???</script>完整代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>弹出广告</title> ???<style type="text/css"> ???????#box{ ???????????width:200px; ???????????height:200px; ???????????position:absolute; ???????????right:10px; ???????????bottom:0; ???????????display:none; ???????} ???</style></head><body> ???<div id="box"> ???????<img src="../../lufei.jpg" style="width:80%; height:50%;"/> ???</div></body> ???<script src="../jquery-3.2.1.min.js"></script> ???<script type="text/javascript"> ???????$(document).ready(function () { ???????????$(‘#box‘).slideDown(‘normal‘).slideUp(‘fast‘).fadeIn(2000).click(function () { ???????????????$(this).fadeOut(1000); ???????????}) ???????}) ???</script></html>
回到顶部↑
前端开发之jQuery效果篇
原文地址：https://www.cnblogs.com/schut/p/9551992.html