用CSS3的“过渡”山寨Jquery的导航栏1

首先，本例子来源于http://www.jqshare.com/Jq/fondone/id/134.html

好了，现在正式说明如何山寨。

过渡，动画和变换是CSS3新添的三种特性。其中过渡属性有transition-delay, transition-duration, transition-property和transition-timing-function。也可以直接用tansition简写属性，格式如下：<transition-property>< transition-duration><transition-delay><transition-timing-function>。

从一下这个例子可以看出，hover后，背景不一样了，这个可以用CSS Sprite技术实现。例子中的使用的是Jquery方式实现，但是从结果上来看，我们可以试着以CSS3的“过渡”方式实现。

代码如下：

 ul#nav li a{
            display: block; width: 97px; height: 77px;
            padding: 72px 0 0 0; margin: 0 32px 0 32px;
            font: bold 16px Helvetic,Arial,Sans-Serif; text-transform: uppercase;
            color:#9c5959; text-shadow: 0 1px 3px #c4bda6; text-decoration: none;
            background: url(images/label.png) 0 -149px no-repeat;
            -ms-transition-duration: 300ms;  //反向过渡
            -ms-transition-delay: 100ms;   <span style="font-family: Arial, Helvetica, sans-serif;">//反向过渡</span>

        }
        ul#nav li a:hover{
            background: url(images/label.png) 0 0 no-repeat;
            color:#eee9d9; text-shadow: 0 2px 3px #4c2222;
            -ms-transition-duration: 300ms;
            -ms-transition-delay: 100ms;
            
        }

代码中，可以主要用到了过渡的两个属性，之所以添加delay的目的，是上鼠标滑过衔接比较流畅。另外，原样式a中也有过渡属性，其被称为反向过渡，出现在 HTML5权威指南中的第480页。

但是问题出来了！！！！！！ 过渡不比动画，每次鼠标滑入的时候，会启动过渡的hover样式，但是划出的时候，就会立马启用原来的样式，倘若我们滑入滑出的时间小于300+100ms的话，则hover的样式会运行不完全后立刻变成原来的样式。不想jquery的animate效果。我们知道jquery的所有动画会进入一个动画队列，然后一个一个动画的执行，不管你当前的状态如何。所以，如果使用jquery的话，及时鼠标滑入滑出小于400ms，hover的动画也会执行完全。

jquery的animate方法只能改变单位为数值的css，比如width，height，top，left，opacity，等。不能改变字符串css，比如对齐方式，颜色神马的，可以改变background-position。另外！！！！不是我想黑w3school，而是他们有些例子确实不能实现！！！比如这个关于如何利用animate改变backgroudPosition的例子：http://www.w3school.com.cn/tiy/t.asp?f=jquery_eff_ani_backgroundposition。事实证明！IE，Sougou，FF都不行！于是，我就百度如何用animate改变background-position。感谢李彦宏！度娘让我知道了可以用这个方法~~~代码如下：

$(document).ready(function(e){
            alert("1111");
           $("#nav li a").hover(function(){
               //$(this).css("background","url(images/label.png) 0 0 no-repeat");
                $(this).animate({backgroundPositionX:"0px", backgroundPositionY:"0px"},300);
           },function(){
                //$(this).css("background","url(images/label.png) 0 -149px no-repeat");
                $(this).animate({backgroundPositionX:"0px", backgroundPositionY:"-149px"},300);
           });
        });

对头！就是这个backgroundPositionX和backgroundPositionY 两个属性改变了background-position！！~~~ 最起码，这个在IE下可以行的通~~ 但是！！！FF好像不认识他 。。。很苦逼~~~继续度娘！~~

百度第一条http://www.2cto.com/kf/201208/147947.html，说这种写法火狐不支持~需要对扩展xxx，有点没看懂~~~但是！插件animate-bg.js可供使用哦~~~，具体做法可以参照http://snook.ca/archives/javascript/jquery-bg-image-animations/这个人的~~ 老外写的就是详细~~

回头有时间研究研究这个插件是怎么用的思密达~~~~！！！！

总结一下：这篇文章的主要目的是山寨一个比较炫的例子，从CSS3和jquery的两个角度尝试去山寨。CSS3的动画效果不好，jquery在没有插件的情况下，兼容了IE，却不兼容FF，最后发现为什么例子中会引用animate-bg.js这个插件了！！！！！

最后的最后，虽然w3school有诸多的不太好，但是还有很多很多好的地方值得学习。给个链接~这个链接说明了哪些属性可以通过animate改变~

http://www.w3school.com.cn/jquery/effect_animate.asp