您的位置: 首页  >  IT文章  >  JQuery简略学习(5)——JQuery效果

JQuery简略学习(5)——JQuery效果

分类: IT文章 • 2024-01-20 23:23:42
JQuery简单学习(5)——JQuery效果
jQuery 是为事件处理特别设计的。
————————————————————
jQuery 事件函数
隐藏、显示、切换、滑动 以及动画
实例
jQuery hide()
Js代码  
<html>  
  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("p").click(function(){  
  $(this).hide();  
  });  
});  
</script>  
</head>  
  
<body>  
<p>If you click on me, I will disappear.</p>  
</body>  
  
</html>
 

演示简单的 jQuery hide() 函数。

jQuery hide()
Js代码  
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
$(".ex .hide").click(function(){  
$(this).parents(".ex").hide("slow");  
});  
});  
</script>  
<style type="text/css">   
div.ex  
{  
background-color:#e5eecc;  
padding:7px;  
border:solid 1px #c3c3c3;  
}  
</style>  
</head>  
   
<body>  
  
<h3>Island Trading</h3>  
<div class="ex">  
<button class="hide" type="button">Hide me</button>  
<p>Contact: Helen Bennett<br />   
Garden House Crowther Way<br />  
London</p>  
</div>  
  
<h3>Paris Trading</h3>  
<div class="ex">  
<button class="hide" type="button">Hide me</button>  
<p>Contact: Marie Bertrand<br />   
265, Boulevard Charonne<br />  
Paris</p>  
</div>  
  
</body>  
</html>


另一个 hide() 演示。如何隐藏部分文本。

jQuery slideToggle()
Js代码  
<html>  
<head>  
  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">   
$(document).ready(function(){  
$(".flip").click(function(){  
    $(".panel").slideToggle("slow");  
  });  
});  
</script>  
   
<style type="text/css">   
div.panel,p.flip  
{  
margin:0px;  
padding:5px;  
text-align:center;  
background:#e5eecc;  
border:solid 1px #c3c3c3;  
}  
div.panel  
{  
height:120px;  
display:none;  
}  
</style>  
</head>  
   
<body>  
   
<div class="panel">  
<p>Because time is valuable, we deliver quick and easy learning.</p>  
<p>At W3School, you can study everything you need to learn, in an accessible and handy format.</p>  
</div>  
   
<p class="flip">Show/Hide Panel</p>  
   
</body>  
</html>


演示简单的 slide panel 效果。

jQuery fadeTo()
Js代码  
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("button").click(function(){  
  $("div").fadeTo("slow",0.25);  
  });  
});  
</script>  
</head>  
  
<body>  
<div id="test" style="background:yellow;width:300px;height:300px">  
<button type="button">Click to Fade</button>  
</div>  
  
</body>  
  
</html>


演示简单的 jQuery fadeTo() 函数。

jQuery animate()
Js代码  
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">   
$(document).ready(function(){  
  $("#start").click(function(){  
  $("#box").animate({height:300},"slow");  
  $("#box").animate({width:300},"slow");  
  $("#box").animate({height:100},"slow");  
  $("#box").animate({width:100},"slow");  
  });  
});  
</script>   
</head>  
   
<body>  
  
<p><a href="#" id="start">Start Animation</a></p>  
  
<div id="box"  
style="background:#98bf21;height:100px;width:100px;position:relative">  
</div>  
   
</body>  
</html>
 

演示简单的 jQuery animate() 函数。

————————————————————
jQuery 隐藏和显示
通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示：

实例
Js代码  
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("#hide").click(function(){  
  $("p").hide();  
  });  
  $("#show").click(function(){  
  $("p").show();  
  });  
});  
</script>  
</head>  
<body>  
<p id="p1">If you click on the "Hide" button, I will disappear.</p>  
<button id="hide" type="button">Hide</button>  
<button id="show" type="button">Show</button>  
</body>  
</html>

hide() 和 show() 都可以设置两个可选参数：speed 和 callback。

语法：
Js代码 
$(selector).hide(speed,callback) 
 
$(selector).show(speed,callback) 
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

speed 参数可以设置这些值："slow", "fast", "normal" 或 milliseconds：

实例
Js代码  
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("button").click(function(){  
  $("p").hide(1000);  
  });  
});  
</script>  
</head>  
<body>  
<button type="button">Hide</button>  
<p>This is a paragraph with little content.</p>  
<p>This is another small paragraph.</p>  
</body>  
</html>
 
————————————————————
jQuery 切换
jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。

隐藏显示的元素，显示隐藏的元素。

语法：
Js代码  
$(selector).toggle(speed,callback)  
 speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。


实例
Js代码  
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("button").click(function(){  
  $("p").toggle();  
  });  
});  
</script>  
</head>  
<body>  
<button type="button">Toggle</button>  
<p>This is a paragraph with little content.</p>  
<p>This is another small paragraph.</p>  
</body>  
</html>

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
————————————————————
jQuery 滑动函数 - slideDown, slideUp, slideToggle
jQuery 拥有以下滑动函数：
Js代码  
$(selector).slideDown(speed,callback)  
  
$(selector).slideUp(speed,callback)  
  
$(selector).slideToggle(speed,callback)

speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
slideDown() 实例

Js代码  
<html>  
<head>  
  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">   
$(document).ready(function(){  
  $(".flip").click(function(){  
    $(".panel").slideDown("slow");  
  });  
});  
</script>  
   
<style type="text/css">   
div.panel,p.flip  
{  
margin:0px;  
padding:5px;  
text-align:center;  
background:#e5eecc;  
border:solid 1px #c3c3c3;  
}  
div.panel  
{  
height:120px;  
display:none;  
}  
</style>  
</head>  
   
<body>  
   
<div class="panel">  
<p>Because time is valuable, we deliver quick and easy learning.</p>  
<p>At W3School, you can study everything you need to learn, in an accessible and handy format.</p>  
</div>  
   
<p class="flip">Show Panel</p>  
   
</body>  
</html>



slideUp() 实例
Js代码  
<html>  
<head>  
  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">   
$(document).ready(function(){  
  $(".flip").click(function(){  
    $(".panel").slideUp("slow");  
  });  
});  
</script>  
   
<style type="text/css">   
div.panel,p.flip  
{  
margin:0px;  
padding:5px;  
text-align:center;  
background:#e5eecc;  
border:solid 1px #c3c3c3;  
}  
div.panel  
{  
height:120px;  
}  
</style>  
</head>  
   
<body>  
   
<div class="panel">  
<p>Because time is valuable, we deliver quick and easy learning.</p>  
<p>At W3School, you can study everything you need to learn, in an accessible and handy format.</p>  
</div>  
   
<p class="flip">Hide Panel</p>  
   
</body>  
</html>

slideToggle() 实例
Js代码  
<html>  
<head>  
  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">   
$(document).ready(function(){  
$(".flip").click(function(){  
    $(".panel").slideToggle("slow");  
  });  
});  
</script>  
   
<style type="text/css">   
div.panel,p.flip  
{  
margin:0px;  
padding:5px;  
text-align:center;  
background:#e5eecc;  
border:solid 1px #c3c3c3;  
}  
div.panel  
{  
height:120px;  
display:none;  
}  
</style>  
</head>  
   
<body>  
   
<div class="panel">  
<p>Because time is valuable, we deliver quick and easy learning.</p>  
<p>At W3School, you can study everything you need to learn, in an accessible and handy format.</p>  
</div>  
   
<p class="flip">Show/Hide Panel</p>  
   
</body>  
</html>
 
  ————————————————————
jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()
jQuery 拥有以下 fade 函数：
Js代码  
$(selector).fadeIn(speed,callback)  
  
$(selector).fadeOut(speed,callback)  
  
$(selector).fadeTo(speed,opacity,callback)

speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。

fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

fadeTo() 实例
Js代码  
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("button").click(function(){  
  $("div").fadeTo("slow",0.25);  
  });  
});  
</script>  
</head>  
  
<body>  
<div id="test" style="background:yellow;width:300px;height:300px">  
<button type="button">Click to Fade</button>  
</div>  
  
</body>  
  
</html>


fadeOut() 实例
Js代码  
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("#test").click(function(){  
  $(this).fadeOut(4000);  
  });  
});  
</script>  
</head>  
  
<body>  
<div id="test" style="background:yellow;width:200px">CLICK ME AWAY!</div>  
<p>If you click on the box above, it will be removed.</p>  
</body>  
  
</html>

   ————————————————————
jQuery 自定义动画
jQuery 函数创建自定义动画的语法：
Js代码  
$(selector).animate({params},[duration],[easing],[callback])  
 关键的参数是 params。它定义了产生动画的属性。可以同时设置多个此类属性：
Js代码  
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});  
 第二个参数是 duration。它定义用来应用于动画的时间。它设置的值是："slow", "fast", "normal" 或 毫秒。


实例 1
Js代码  
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">   
$(document).ready(function(){  
  $("#start").click(function(){  
  $("#box").animate({height:300},"slow");  
  $("#box").animate({width:300},"slow");  
  $("#box").animate({height:100},"slow");  
  $("#box").animate({width:100},"slow");  
  });  
});  
</script>   
</head>  
   
<body>  
  
<p><a href="#" id="start">Start Animation</a></p>  
  
<div id="box"  
style="background:#98bf21;height:100px;width:100px;position:relative">  
</div>  
   
</body>  
</html>

实例 2
Js代码  
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">   
$(document).ready(function(){  
  $("#start").click(function(){  
  $("#box").animate({left:"100px"},"slow");  
  $("#box").animate({fontSize:"3em"},"slow");  
  });  
});  
</script>   
</head>  
   
<body>  
  
<p><a href="#" id="start">Start Animation</a></p>  
  
<div id="box"  
style="background:#98bf21;height:100px;width:200px;position:relative">  
HELLO  
</div>  
   
</body>  
</html>
 
HTML 元素默认是静态定位，且无法移动。
如需使元素可以移动，请把 CSS 的 position 设置为 relative 或 absolute。

   ————————————————————

jQuery 效果 - 来自本页
函数 描述 $(selector).hide() 隐藏被选元素 $(selector).show() 显示被选元素 $(selector).toggle() 切换（在隐藏与显示之间）被选元素 $(selector).slideDown() 向下滑动（显示）被选元素 $(selector).slideUp() 向上滑动（隐藏）被选元素 $(selector).slideToggle() 对被选元素切换向上滑动和向下滑动 $(selector).fadeIn() 淡入被选元素 $(selector).fadeOut() 淡出被选元素 $(selector).fadeTo() 把被选元素淡出为给定的不透明度 $(selector).animate() 对被选元素执行自定义动画

相关推荐