jquery随记（效果）---一些特效2011.08.22
********************************************************************************************************************************************
一些常见的特效函数：
.hide()//隐藏
.show()//显示
.fadeIn()//淡出
.fadeOut()//淡入
.slideToggle()//划动出现、消失
.slideUp('slow')
.slideDown('slow')
.fadeTo('slow',0.5)//
.fadeTo('slow',1.0)//
*********************************************************************************************************************************************
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="Untitled-2.css" />
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//hide()和show()
/*$('p:eq(1)').hide();
$('a.more').click(function(){
$('p:eq(1)').show();
$(this).hide();
return false;//避免超连接的默认操作
})*/
//为显示隐藏添加速度
//show(param):param的值：'slow'、'fast'、'normal'还可以说自己想要的数字;
/*$('p:eq(1)').hide();
$('a.more').click(function(){
$('p:eq(1)').show('slow');
//$('p:eq(1)').show(850);
$(this).hide();
return false;//避免超连接的默认操作
})*/
//淡入淡出--fadeIn()和fadeOut();
/*$('p:eq(1)').hide();
$('a.more').click(function(){
$('p:eq(1)').fadeIn('slow');
$(this).hide();
return false;//避免超连接的默认操作
})*/
//淡入淡出的复合效果
/*$('a.more').click(function(){
$firstPara=$('p:eq(1)');
if($firstPara.is(':hidden')){
$firstPara.fadeIn('slow');
$(this).text("read less");
}
else{
$firstPara.fadeOut('slow');
$(this).text("read more");
}
})*/
//滑动的复合效果----slideToggle()
/*$('a.more').click(function(){
$firstPara=$('p:eq(1)');
$firstPara.slideToggle('slow');
if($firstPara.is(':hidden')){
$(this).text("read less");
}
else{
$(this).text("read more");
}
})*/
//animate()应用:实现淡入淡出
/*$firstPara=$('p:eq(1)');
$firstPara.hide();
$('a.more').click(function(){
$firstPara.animate({opacity:'toggle'},'slow');
if($(this).text()=="read more"){
$(this).text("read less");
}
else{
$(this).text("read more");
}
})*/
//animate()实现滑动和淡入淡出
/*$firstPara=$('p:eq(1)');
$firstPara.hide();
$('a.more').click(function(){
$firstPara.animate({opacity:'toggle',
height:'toggle'},'slow');
if($(this).text()=="read more"){
$(this).text("read less");
}
else{
$(this).text("read more");
}
})*/
//animate()实现的特效
$('.label').click(function(){
var paraWidth=$('.p1').outerWidth();
var $switcher=$(this).parent();
var switcherWidth=$switcher.outerWidth();
var w=paraWidth - switcherWidth;
$('#switcher').animate({left:'80%',height:'+=20px'},'slow');
});
});
</script>
</head>
<body>
<div id="switcher">
<div class="label">Text Size </div>
<button id="switcher-default">Default</button>
<button id="switcher-larger">Bigger</button>
<button id="switcher-small">Small</button>
</div>
<div class="speech">
<p class="p1">Fourscore and seven years ago our fathers brought forth
on this sontinent a new nation,conceived in liberity,
and dedicated to the proposition that all men are created
equal.
</p>
<p>Now we are engaged in a great civil war,testing whether
that nation, or any nation so conceived and so didicated,
can long endure,We are met on a great battlefield of
that war, We have come to dedicate a portion of that
field as a final resting-place for those who here gave
their lives that the nation might live,it is altogether
fitting and proper that we should do this .But,in a larger
sense,we cannot dedicate,we cannont consecrate,
we cannot ballow,this ground.
</p>
<a href="#" class="more">read more</a>
</div>
</body>
</html>