jQuery顺序淡入显示元素特效js代码

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

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

以下是 jQuery顺序淡入显示元素特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery顺序淡入显示元素特效</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.fadequeue.min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
$(document).ready(function(){
    //# Since this plugin fades stuff in, lets hide 
    //# everything when document is ready.
    $('#content p').hide();

    //# DEMO 1
    $('#demo1').bind('click', function(){
        $('#content').fadeQueue();
    });

    //# DEMO 2
    $('#demo2').bind('click', function(){
        $('#content').fadeQueue({
            duration: 500,
            pause: 40
        });
    });
    
    //# DEMO 3
    $('#demo3').bind('click', function(){
        $('#content').fadeQueue(50, function(){
            $('#content').prepend('<div class="bazinga"><h2>Bazinga!</h2> This markup was prepended into the dom when queue is empty.<br> - Click to remove.</div>').bind('click', function(){
                $('div.bazinga').remove();
            });
        });
    });

    //# DEMO 4
    $('#demo4').bind('click', function(){
        $('#content p').show();
        $('#content').fadeQueue({
            startAt: $('#content :nth-child(5)')
        });
    });
});
</script>
</head>
<body>
<div class="container">
  <h1>jQuery fadeQueue Plugin Demos</h1>
  <nav>
  <ul>
    <li>
      <button id="demo1">Demo 1</button>
    </li>
    <li>
      <button id="demo2">Demo 2</button>
    </li>
    <li>
      <button id="demo3">Demo 3</button>
    </li>
    <li>
      <button id="demo4">Demo 4</button>
    </li>
  </ul>
  <nav>
  <section id="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aenean commodo ligula eget dolor. Aenean massa.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
    <p>Nulla consequat massa quis enim.</p>
    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
    <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
    <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
    <p>Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
    <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
    <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
    <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
    <p>Aenean imperdiet. Etiam ultricies nisi vel augue.</p>
    <p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
    <p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing.</p>
    <p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
    <p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.</p>
    <p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.</p>
    <p>Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
    <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
  </section>
</div>
</body>
</html>

JS代码(jquery.fadequeue.min.js):

/** jQuery fadeQueue - v0.5 - 25/2/2011* Copyright (c) 2011 Palle Zingmark <www.sucaijiayuan.com>* Dual licensed under the MIT and GPL licenses.*/
(function($){
	$.fn.fadeQueue=function(args){
	var p=$(this),z={
}
,y=null,d=200,k=0,c=null,t=0,q=0,s=p.children(':first');
	if(typeof args!=='undefined'){
	for(var i=0,n=arguments.length;
	i<n;
	i++){
	var a=arguments[i];
	switch(typeof a){
	case'number':d=a;
	break;
	case'object':z=a;
	break;
	case'function':c=a;
	break;
}
}
y=(typeof z.startAt!=='undefined')?z.startAt:null;
	d=(typeof z.duration!=='undefined')?z.duration:d;
	k=(typeof z.pause!=='undefined')?z.pause:k;
}
if(k===0){
	k=(d/2);
}
if(y){
	y.next().nextAll().hide();
	s=y;
}
else{
	$(this).children().hide();
}
p.children().stop(true,true);
	var f=function(elm){
	if(elm.length!==0){
	t=window.setTimeout(function(){
	elm.fadeIn(d);
	q=window.setTimeout(function(){
	f(elm.next());
}
,k);
}
,k/2);
}
else{
	if(typeof c=='function'){
	return new c();
}
}
}
;
	f(s);
}
;
}
)(jQuery);

CSS代码(style.css):

html,body,h1,h2,p,ul,li{margin:0;padding:0}
html,body{font-size:100%}
body{font:normal 12px/1.3 arial,serif}
p{float:left;width:126px;height:100px;padding:10px;margin:5px;background:#3498DB;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:#666 0px 1px 2px;-moz-box-shadow:#666 0px 1px 2px;box-shadow:#666 0px 1px 2px;color:#fff;}
section{display:block;padding:0}
.container{width:625px;margin:0 auto;}
ul{overflow:hidden;padding:10px 0}
li{float:left;list-style:none;padding:0 3px}
header{display:block;position:relative}
h1{font-size:33px;color:#2980B9;margin:50px auto 30px auto;}
.bazinga{background:#fffeee;border:1px solid #ccc;padding:20px}
button:hover{cursor:pointer}
button::-moz-focus-inner{border:0}
button.back{position:absolute;right:3px;top:15px}
button.back{background:#eee;background:-moz-linear-gradient(top,#eee 0%,#ccc 100%);background:-webkit-gradient(linear,0% 0%,0% 100%,from(#eee),to(#ccc));border:1px solid #ccc;border-bottom:1px solid #bbb;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;color:#333;font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;font-size:11px;font-weight:bold;line-height:1;padding:8px 0;text-align:center;text-shadow:0 1px 0 #eee;width:150px}
button.back:hover{background:#ddd;background:-moz-linear-gradient(top,#ddd 0%,#bbb 100%);background:-webkit-gradient(linear,0% 0%,0% 100%,from(#ddd),to(#bbb));border:1px solid #bbb;border-bottom:1px solid #999;cursor:pointer;text-shadow:0 1px 0 #ddd}
button.back:active{border:1px solid #aaa;border-bottom:1px solid #888;-moz-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;-webkit-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee}
li button{background:#7fbf4d;background:-moz-linear-gradient(top,#7fbf4d 0%,#63a62f 100%);background:-webkit-gradient(linear,0% 0%,0% 100%,from(#7fbf4d),to(#63a62f));border:1px solid #63a62f;border-bottom:1px solid #5b992b;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:inset 0 1px 0 0 #96ca6d;-webkit-box-shadow:inset 0 1px 0 0 #96ca6d;box-shadow:inset 0 1px 0 0 #96ca6d;color:#fff;font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;font-size:11px;font-weight:bold;line-height:1;padding:7px 0 8px 0;text-align:center;text-shadow:0 -1px 0 #4c9021;width:150px}
li button:hover{background:#76b347;background:-moz-linear-gradient(top,#76b347 0%,#5e9e2e 100%);background:-webkit-gradient(linear,0% 0%,0% 100%,from(#76b347),to(#5e9e2e));-moz-box-shadow:inset 0 1px 0 0 #8dbf67;-webkit-box-shadow:inset 0 1px 0 0 #8dbf67;box-shadow:inset 0 1px 0 0 #8dbf67;cursor:pointer}
li button:active{border:1px solid #5b992b;border-bottom:1px solid #538c27;-moz-box-shadow:inset 0 0 8px 4px #548c29,0 1px 0 0 #eee;-webkit-box-shadow:inset 0 0 8px 4px #548c29,0 1px 0 0 #eee;box-shadow:inset 0 0 8px 4px #548c29,0 1px 0 0 #eee}
/**Creds to ubuwaits for CSS Buttonshttps://github.com/ubuwaits/css3-buttons*/

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