CSSrainbow.cn

Sharing what I know and learn about (X)HTML,CSS,JavaScript,MooTools,Dojo,jQuery,PHP,ASP,Java,Python and ∞.

Tutorials \ MooTools \ Tutorials \ jQuery

打破重复的动画效果,基于CSS,MooTools or jQuery »

Posted on: in MooTools, jQuery By:
Rainbow
3

也许您看到此文章的标题，有点怪，不好理解。其实我想表达的应用场景是网页上的视频，图片和在线的文档阅读器等，在初始状态下是一种默认效果，当我们的鼠标移到目标上时是还是没有变化的，还是默认的效果。面对这样重复的默认动画效果。是否我们能改善一下用户的体验，增加一个不一样的动画效果或提示。

说是那么多，还是有点不明白！哈哈，那我们还是先看一下实例吧，你就知道我想说啥！

Repeating Animations

 

MooTools View Demo »
  
jQuery View Demo »

 

我举的例子，实际上就是图像交叉淡入淡出过渡的效果。

The Html Cood :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

 <div id="video-preview">
    <ul>
         <li>
             <a class="quicktime_video" href="http://cssrainbow.cn">
                <img alt="QuickTime version" src="video_quicktime.png">
                Play QuickTime version <span class="download">Right click to download</span>
             </a>
         </li>
         <li>
             <a class="flash_video" href="http://cssrainbow.cn">
                 <img alt="Flash version" src="video_flash.png">
                 Play Flash version <span class="download">Right click to download</span>
             </a>
         </li>
    </ul>
    <img src="image-fade.png" alt="Image Cross Fade Transition" />
 </div>

The CSS Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; font-size: 16px; line-height: 20px; padding: 20px; }
a { margin:0;padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent;}
a img { border: 0; background: none; }
img	{ vertical-align: middle; }
a:link, a:active, a:visited {color: #fff;text-decoration: none;}
a:hover{color: #C60;}
 
/*CSS Core*/
#video-preview { 
    border: 5px solid #000; 
    width:600px;
	margin: 0 auto;
	position: relative;
    overflow: hidden; 
}
 
#video-preview ul {
	display: block;
	margin: 0; 
	position: absolute;
    width: 600px;
    height: 325px;
/*   width: 100%;
     height: 100%;*/ 
	background:#000;
	top: 0px;
	left: 0px;	
    opacity: 0;
    -moz-opacity: 0;
    filter:alpha(opacity=0); 
 
}
#video-preview ul li {
	float: left;
	width: 50%;
	margin-top: 65px;
	list-style-type: none;
}
#video-preview ul li a {
	display: block;
	font-size: 20px;
	text-align: center;
	overflow:hidden;/*ie 去掉虚线*/
	outline:0;/*ff 去掉虚线*/
}
#video-preview ul li a img {
	display: block;
	margin: 0 auto 18px auto;
}
#video-preview ul li a.download {
	font-size: 12px;
}
 
#video-preview ul li .download {
	font-size: 12px;
	display: block;
}

The MooTools JavaScript:

1
2
3
4
5
6
7
8
9
10
11

window.addEvent('domready',function(){
      $('video-preview').addEvents({
	        mouseenter: function() {
			  this.getElement('ul').setStyle('display','block').fade('0.8');
			},
			mouseleave: function() {
			  this.getElement('ul').setStyle('display','none').fade('0'); 
			}
 
     });										
});

 

MooTools View Demo »

 

The jQuery JavaScript:

1
2
3
4
5
6
7

$(document).ready(function () {
	 $('#video-preview').hover(function () {
		 $(this).find('ul').stop().fadeTo('normal', 0.8);
		 }, function () {
		 $(this).find('ul').stop().fadeTo('normal', 0);
	 });
});

 

jQuery View Demo »

 

Responses 3 Comments. Add Comment

  1. jinjish 说：
    2010/06/25于07:43

    学习一下子先

    回复
  2. yuliang 说：
    2010/06/27于18:32

    郁闷 不知道是博主的空间慢 还是我的网速慢呀 打开发个言 结果等了半天 嘿嘿

    回复

Leave a Comment