使用jquery制作循环渐隐动画

发表于 | 作者：

不知大家注意到本博右上角的浏览器动画没,九个浏览器图标循环渐隐,我知道速度很慢 :a5 ,但要的就是不经意间的华丽,如锦衣夜行,,, :b9

其实现在一些看起来很炫的动画完全可以由js来实现,完全不需要flash(i hate flash! :e7 ),本例就来讲下如何使用强大的jquery来实现这一效果.

首先,你需要在你的博客上添加jquery,wordpress自带jquery,但最好使用Google提供的Google AJAX Libraries API.
一来减轻你服务器负担,二来Google的速度确实不错,更可能人们在别的地方早已经缓存了这个文件,毕竟jquery现在很流行的.

仔细观察右上角动画的效果,构想下它的思路,假设是你,如何实现呢 :c9

首先,它需要占用一块地方(废话 :c4 ),把九张图片堆叠在一起,就像叠扑克牌,保证每张图片大小方位全部重合(你也可以不重合,看实际需求,现在只讲如何实现这个效果),你可以从这里下载到这九张图片.

然后假设你从最底下抽上来一张放到上面,但其实这张是隐形的,然后让它慢慢显现,完毕后再从底下抽出一张,重复,重复,思路很简单,idea is important! :a7

接下来,让我们慢慢一步步实现它,

先创建一个无序列表(为什么要无序?因为我们要不停的改变它的顺序),把这九张图片做为每一列的背景.

1
2
3
4
5
6
7
8
9
10
11

<ul id="showWeb">
<li style="background-image: url('1.jpg')"></li> 
<li style="background-image: url('2.jpg')"></li> 
<li style="background-image: url('3.jpg')"></li>
<li style="background-image: url('4.jpg')"></li>
<li style="background-image: url('5.jpg')"></li>
<li style="background-image: url('6.jpg')"></li>
<li style="background-image: url('7.jpg')"></li>
<li style="background-image: url('8.jpg')"></li>
<li style="background-image: url('9.jpg')"></li>
</ul>

给它们添加样式,先要把ul固定起来

#showWeb{
        position:absolute;
        bottom:10px;
        right:10px;
        width:256px;
        height:256px;
}

再把li们都堆叠起来

#showWeb li{
        width:256px;
        height:256px;
        position:absolute;
        left:0;
        top:0;
}

然后编写js

1
2
3
4
5
6
7
8
9
10
11
12
13

var $explorer = jQuery('#showWeb li');
	function explorerchange(index){
		var pre = index;
		if(index == 8){
			index = -1;
		}
		index +=1;
		$explorer.css('z-index','1').not($explorer.eq(pre)).hide();
		$explorer.eq(index).css('z-index','100').animate({opacity:'show'},8000,function(){
			explorerchange(index);
		});
	}
	explorerchange(0);

第一行是选取要变化的 li 组成一个jquery数组,

第二行是定义方法的名称,传入一个参数,这个参数就起一个堆叠顺序的序号作用

接下来将序号加1,并存储上一次的序号(因为我们要把除了上次渐显出的那张图片外的其他图片隐藏掉),

如果序号超过数量,则给它初始化,(留一个问题,为什么是8而不是9呢 :c9 )

1
2
3
4
5

var pre = index;
if(index == 8){
	index = -1;
}
index +=1;

然后就是重点来了,强大的jquery给了我们很多的方法,我们不需要知道他们是如何运作的,只要知道如何使用及使用后有什么效果就可以了。

先把所有的li隐藏但独独剩下刚才显示的那一个(因为它要给渐显出来的那张扑克当底)

1

$explorer.css('z-index','1').not($explorer.eq(pre)).hide();

根据序号抽出一张扑克放到顶层

1

$explorer.eq(index).css('z-index','100')

并使它渐显出来,间隔为8秒

1

$explorer.eq(index).css('z-index','100').animate({opacity:'show'},8000)

但这样只会渐显一次,怎么办呢,让方法回调它自己就ok啦,也就是方法再执行一遍它自己,然后它就会一遍一遍又一遍,子子孙孙无穷匮也 :b4

1
2
3

$explorer.eq(index).css('z-index','100').fadeIn(8000,function(){
		explorerchange(index);
	});

最后执行代码

1

explorerchange(0);

忘说了,js代码要放在ul标签后面,要不然它不执行哦 。

好了,现在谁能说出为什么是8而不是9呢,没错,因为数组的index是由0开始的,所以我们需要把序号减一。

看了这么多,你真正懂了吗,还不快动手试一试,有问题的话请留言,如果有时间我一定答复你。

38 条评论在 “使用jquery制作循环渐隐动画”

  4. 今天来是想来请教你个问题:
    我今天用IE test 检测我站的时候,发现在IE6下会弹出错误: 脚本错误 ‘px’ is undefined
    然后IE6下 Logo图片和下拉菜单不显示,IE6 IE7下嘴下面的翻页按钮下面一点点也会有点问题,能不能给点思路哦?
    先谢谢你咯…

    回复 ↓

    • :e3 你的页头好像是js生成的,不过为什么你装了prototype还装jquery呢,这两个不太兼容,是不是你使用了$了?

      回复 ↓

      • 好像有用 var $j = jQuery.noConflict(); 只是在IE6下头部不会显示,IE7和IE8下都正常,也许是该死的IE6的支持问题吧.
        我现在直接用容错代码先隐藏了.
        底部的翻页有没有什么解决方案哦?我有试着在css里加入zoom:1; ,不过貌似没啥反应.唉唉…
        不懂网页和js的我太可悲了…

        回复 ↓

    • 你好！有一个同类问题想请教：
      $(document).ready(function(){
      $(“.dotA”).animate({top:”100px”},500);
      $(“.dotB”).animate({top:”200px”},500);
      $(“.dotA”).animate({top:”0px”},500);
      $(“.dotB”).animate({top:”0px”},500);
      });

      页面打开后只跳动一次，如何更改才能使两个小球无限次循环跳动？你的代码不会用唉……
      :e9

      回复 ↓

      • 你可以这样写:
        $(function(){
        function ae(){
        $('.dotA').animate({top:'100px'},500).animate({top:'0px'},500);
        $('.dotB').animate({top:'200px'},500).animate({top:'0px'},500,ae);
        }
        ae();
        })
        注意不要使用中文字符,并且不推荐使用类选择器,效率太低

        回复 ↓

    • $explorer.eq(index).css('z-index','100').animate({opacity:'show'},8000,function(){
      explorerchange(index);
      });
      修改为:
      $explorer.eq(index).css('z-index','100').animate({opacity:'show'},8000,function(){
      setTimeout(function(){explorerchange(index)},4000);
      });
      其中4000就是你设置停留显示的时间,单位毫秒,自己修改

      回复 ↓

  16. 受教了 在$explorer.css(‘z-index’,’1′).not($explorer.eq(pre)).hide();后是不是应该加一句
    $explorer.eq(pre).fadeOut(8000) 要不好像之前那张图片会突然消失 不是页面右上角的效果
    不知道是不是？

    回复 ↓

    • 你理解错误了,不是一个一个消失,而是一开始就全部消失然后一个一个渐显,为了不突兀,所以一开始会留下一张是直接显示的

      回复 ↓

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。