jQuery UI .scale()效果产生奇怪的位置跳转

jQuery UI .scale() effect producing odd positioning jumps

本文关键字：位置 scale UI jQuery      更新时间：2023-09-26

拨动这里

问题描述:

我试图使这个图像scale进入视图(居中)，然后给出它在达到其最大尺寸100%后短暂地从屏幕上"反弹"的外观。不幸的是，随着每一个新的效果链，它都在向右移动。为什么?

请注意，我试图实现的效果是完全不同于bounce的效果。

尝试'scale': 'box'选项的scale效果。

缩放(默认值:"both")

类型:字符串

元素的哪些区域将被调整大小:"both" box";content"Box调整元素的边框和填充大小;Content调整元素内所有内容的大小。

由于您的boxdiv实际上没有任何content，可能，这就是不必要的移位的原因…

你的摆弄修改

另一个小提琴变体

乌利希期刊指南。

正如您在第二小提琴中看到的，您可以为每个动画阶段(效果)使用单独的函数。因此，仅在最外层相位选择电流盒大小，并在下一相位计算刻度百分比与选定的电流/初始盒大小，如下所示:

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

查看预览。

这里有一些漂亮的变体，语法如下:

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