动画与jQuery精灵 [英] Animate sprite with jquery

问题描述

有谁知道动画使用jQuery一个精灵的最佳方法。有图像的3个阶段，我需要逐渐变身鼠标悬停并最终降落在最后一节，直到鼠标关闭。

Does anybody know the best approach to animating a sprite using jquery. There are 3 stages of an image that i need to gradually to morph on mouseover and eventually landing on the final one until mouse off.

下面是图像：

谢谢！

推荐答案

我使用尝试了CSS3的转换和动画（只适用于现代的浏览器，请参阅 caniuse ）

I tried something using CSS3 transition and animation (it only works on modern browser, see caniuse)

您可以在这里看到我的例子小提琴： http://jsfiddle.net/fcalderan/hfs22/结果
主要优点：

you can see my example fiddle here: http://jsfiddle.net/fcalderan/hfs22/
Main benefits:

• 没有需要的JavaScript，它是100％纯CSS;


• 无需加载图像;


• 流畅的动画效果。

HTML仅仅是＆LT; D​​IV＆GT;＆LT;跨度＆GT;＆LT; / SPAN＆GT;＆LT; / DIV＆GT; ：我试着避免支持pseudoelements内跨度：HTTP：//$c$c.google.com/p/chromium/issues/detail ID = 54699在Chrome，不幸的是，过渡不正确（请参阅错误的 HTTP：//$c$c.google.com/p/chromium/issues/detail ID = 54699 ）

HTML is simply <div><span></span></div>​: I tried to avoid the inner span in favour of pseudoelements: on Chrome, unfortunately, transitions don't properly work when applied to such elements (see bug http://code.google.com/p/chromium/issues/detail?id=54699)

在CSS

div {
   height: 100px;
   width : 100px;
   -webkit-border-radius: 100px;
   -msie-border-radius: 100px;
   -moz-border-radius: 100px;
   border-radius: 100px;

   -webkit-box-sizing: border-box; 
   -moz-box-sizing: border-box;
   box-sizing: border-box;

   border  : 20px red solid;    
   cursor  : pointer;

}

div span {

   -webkit-transform: rotate(45deg);
   -msie-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);

   display  : block;
   margin     : 10px 0 0 -20px;
   background : #fff;
   width    : 102px;
   height   : 40px;

   -webkit-transition: all 2s ease;
   -msie-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -o-transition: all 2s ease;
   transition: all 2s ease;


}

div:hover {
   -webkit-animation : rotation 2s ease;
   -msie-animation : rotation 2s ease;
   -moz-animation : rotation 2s ease;
   -o-animation : rotation 2s ease;
   animation : rotation 2s ease;
}

div:hover span {
   height : 0;
   margin-top : 30px;
}

@-moz-keyframes rotation   {
     0%     { -moz-transform: rotate(45deg); }
     100%   { -moz-transform: rotate(-135deg); }
}

@-webkit-keyframes rotation   {
     0%     { -webkit-transform: rotate(45deg); }
     100%   { -webkit-transform: rotate(-135deg); }
}

@-msie-keyframes rotation   {
     0%     { -msie-transform: rotate(45deg); }
     100%   { -msie-transform: rotate(-135deg); }
}

@-o-keyframes rotation   {
     0%     { -o-transform: rotate(45deg); }
     100%   { -o-transform: rotate(-135deg); }
}


@keyframes rotation   {
     0%     { transform: rotate(45deg); }
     100%   { transform: rotate(-135deg); }
}

这篇关于动画与jQuery精灵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！