Question

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

这是图片：

enter image description here

谢谢！

Answer 1

我尝试使用CSS3 过渡和动画（它仅适用于现代浏览器，请参阅caniuse）

你可以在这里看到我的例子：http://jsfiddle.net/fcalderan/hfs22/
主要好处：

不需要javascript，它是100％纯CSS;
无需加载图片;
流畅的动画。

HTML只是<div><span></span></div>：我试图避免内部跨度支持伪元素：在Chrome上，不幸的是，转换在应用于此类元素时无法正常工作（请参阅bug http://code.google.com/p/chromium/issues/detail?id=54699）< / p>

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); }
}

Answer 2

这里是快速草图

http://jsfiddle.net/VEuyH/1/

你只需要将图像调整为动画，我设置背景每帧切换-151px，你也可以调整延迟时间，享受;）

Answer 3

这看起来比你选择的答案好得多：

See my example

下面是一个完全相同的静态图像。如果你可以在photoshop或其他东西中使这个图像的白色部分透明，那么它将具有非常好的平滑关闭效果。

使用jquery动画精灵

3 个答案: