JQuery animate如何让图片同时透明度为0和缩小?

Question

比方说我有个图片,原来的透明度是1,现在想做一个动画效果,在透明度从1变到0的同时,图片缩小到看不见.
我试过在animate写scale,但是没有用

$("div").animate({
    "opacity" : 0,
    "transform" : "scale(0.0001)"
},"linear")

如果是改变宽高的话,这样图片不是缩小而且变成了裁切效果.
我想实现的是先是img的left运动500px,然后才是缩小和透明度为0,用了css3加定时器效果不是很好
请问有什么好的方法解决这个问题呢?

Answer 1

https://jsfiddle.net/Lbrspnjw/
你是想说这样的？
例子中有两种情况，一种是img，一种是div的bg写法。

补充：
https://jsfiddle.net/2amofqff/
那么用css3的transition？
此外，提问也最好要把最后的效果一次性说清楚。。

补充2：
那么大概是这样?
https://jsfiddle.net/2amofqff/1/

补充3：
更改keyframes的时间点，通过总时间与每个节点时间可以分别计算出平移，延迟，和缩小透明度改变这三个阶段分别的时间。
https://jsfiddle.net/2amofqff/2/

Answer 2

使用velocity.js可以实现.

$("img").velocity({
    "opacity" : 0.1,
    "scale" : 0.001
},2000);

Answer 3

不知道这个符不符合你的要求,我是用一块div测试的,

<div style="background:#98bf21;height:100px;width:100px;position:absolute;">

      var div=$("div");
      div.delay(1000, "scale")
      .queue("scale", function(next) {
      $(this).animate({height:'0',width:'0'},{duration: 1000, queue: false});
      next();
      })
      .dequeue("scale")
      .animate({left:'100px'},1000).animate({opacity:'0'},1000);