jQuery用戶界面.scale（）產生奇數的定位效果跳躍的問題

Question

Fiddle here.

描述：

我試圖使這種圖像scale到視圖（居中），然後得到外觀它在達到100％的最大尺寸後短暫地從屏幕「跳躍」。不幸的是，每個新的效果鏈都會向右下移。爲什麼？

請注意，我試圖實現的效果與bounce效果完全不同。

Answer 1

試試'scale': 'box'選項爲scale的效果。

規模（默認： 「雙方」）

類型：String

該元素的區域將被調整： 「兩個」， 「盒子」， 「內容」。 Box調整元素的邊框和內邊距;內容調整元素內部的任何內容。

正如你box DIV實際上沒有任何content，或許，這是不必要的轉變的原因...

此致fiddle與修改。

另一個fiddle變體。

Upd。

正如您在第二個小提琴中可以看到的，您可以爲每個動畫階段（效果）使用單獨的函數。所以，只要在最外相挑當前框的大小，並與榮幸電流/初始框的大小各下一階段的規模計算百分比，如下列：

var box = $('.box'); 
box.data('size', {'w': box.width(), 'h': box.height()}); 
box.show(scale_effect(box, 100, 250, function() { 
    box.stop().effect(scale_effect(box, 80, 100, function() { 
     box.stop().effect(scale_effect(box, 100, 100, function() { 
      box.stop().effect(scale_effect(box, 90, 100, function() { 
       box.stop().effect(scale_effect(box, 100, 100, function() { 
       })); 
      })); 
     })); 
    })); 
})); 

function scale_effect(box, percent, duration, complete) { 
    box = $(box); 
    var size = box.data('size'); 
    var absolutePercent = percent * size.w/box.width(); 
    console.log(absolutePercent); 
    return { 
     'effect': "scale", 
     'percent': absolutePercent, 
     'scale': 'box', 
     'duration': duration, 
     'queue': false, 
     'complete': complete 
    }; 
} 

見fiddle預覽。

而且here's一些漂亮的變異與語法如下：

$('.box').bouncedScale([ 
    {'percent': 100, 'duration': 250}, 
    {'percent': 80, 'duration': 100}, 
    {'percent': 100, 'duration': 100}, 
    {'percent': 90, 'duration': 100}, 
    {'percent': 100, 'duration': 100}, 
]);