jquery淡出效果插件jQFader js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery淡出效果插件jQFader js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8">
	<title>jquery</title>
	<meta name="robots" content="noindex, nofollow">
	<link rel="stylesheet" href="css/style.css" />	
</head>
<body>
	<h2>jQFader</h2>
	<div class="item fader">1</div>
	<div class="item fader">2</div>
	<div class="item fader">3</div>
	<div class="item fader">4</div>
	<div class="item fader">5</div>
	<div class="item fader">6</div>
	<div class="item fader">7</div>
	<div class="item fader">8</div>
	<div class="item fader">9</div>
	<div class="item fader">10</div>
	<div class="item fader">11</div>
	<div class="item fader">12</div>
	<div class="item fader">13</div>
	<div class="item fader">14</div>
	<div class="item fader">15</div>
	<div class="clearer"></div>
	<button class="restart no-display button" onclick="javascript:restart(); return false;">Restart the demo</button>	
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.jqfader.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

JS代码(main.js):

/************************** **** Main.js **************/
jQuery(document).ready(function(){
	init();
}
);
	/** Launch demo **/
function init(){
	jQuery('.fader').jqfader({
	callback:showRestart}
);
	// Simple effect with callback}
/** Show restart button **/
function showRestart(){
	jQuery('.restart').fadeTo(300,1);
}
/** Restart demo **/
function restart(){
	jQuery('.restart,.fader').css({
	'display':'none'}
);
	init();
}

CSS代码(style.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}
:focus{outline:0}
body{line-height:1;color:black;background:white}
ol,ul{list-style:none}
table{border-collapse:separate;border-spacing:0}
caption,th,td{text-align:left;font-weight:normal}
blockquote:before,blockquote:after,q:before,q:after{content:""}
blockquote,q{quotes:"" ""}
body{font:12px/1.55 "Arial",Helvetica,Arial,sans-serif;color:#0f0f0f;background:#fafafa;margin:20px;}
h2{color:#333333;margin:15px 0 25px 0;font-size:30px;font-weight:bold;}
.item{text-align:center;line-height:50px;float:left;width:50px;height:50px;background:#dedede;margin:5px 5px 5px 0;color:#888;font-size:15px;}
.fader,.random,.reverse{display:none;}
.button{margin-top:20px;padding:6px 10px;border:1px solid #DBDBDB;background:#F5F5F5;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5F5F5',endColorstr='#EAEAEA');/* for IE */
background:-webkit-gradient(linear,left top,left bottom,from(#F5F5F5),to(#EAEAEA));/* for webkit browsers */
background:-moz-linear-gradient(top,#F5F5F5,#EAEAEA);/* for firefox 3.6+ */
color:#444444;box-shadow:0px 0px 6px rgba(15,15,15,0.2);-moz-box-shadow:0px 0px 6px rgba(15,15,15,0.2);-webkit-box-shadow:0px 0px 6px rgba(15,15,15,0.2);text-decoration:none;cursor:pointer;font-size:12px;}
.no-display{display:none;}
.clearer{clear:both;}

附件:下载该文件资源,减少时间成本(增值服务)