jQuery UI .scale() 效果产生奇怪的定位跳跃

Question

问题描述：

我正在尝试使此图像 scale 进入视图（居中），然后在达到其最大尺寸 100% 后让其看起来 "bouncing" 短暂地远离屏幕。不幸的是，它随着每个新的效果链向下和向右移动。为什么？

请注意，我尝试实现的效果与 bounce 效果完全不同。

Answer 1

尝试 'scale': 'box' 选项以获得 scale 效果。

scale (default: "both")

Type: String

Which areas of the element will be resized: "both", "box", "content". Box resizes the border and padding of the element; content resizes any content inside of the element.

因为你的 box div 实际上没有任何 content，可能，这就是不想要的转变的原因......

你的 fiddle 经过修改。

另一个 fiddle 变体。

更新

正如您在第二个 fiddle 中看到的，您可以为每个动画阶段（效果）使用单独的函数。因此，只需在最外层阶段选择当前框大小，并在每个下一阶段计算比例百分比与荣誉 current/initial 框大小，如下所示：

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

jQuery UI .scale() 效果产生奇怪的定位跳跃

jQuery UI .scale() effect producing odd positioning jumps

html

javascript

css

jquery

scale