jquery - 在 jQuery UI 1.9 或更高版本中，如何抑制尺寸效果后的恢复？

Question

似乎 jQuery UI 1.9 或更高版本在 size effect 后恢复到原始大小。我的示例代码在这里:

http://jsfiddle.net/mQCxY/

$(function () {
    $('.circle').click(function () {
        $(this).effect("size",
            { to: {width: 50,height: 50}, origin: ['bottom', 'right'] },
            1000, function () {
                $(this).css({'background': 'blue' });
        });
    });
});

基本上，如果我选择 jQuery UI 1.8.18(在 jQuery 1.7.2 下)，那么形状会缩小到合适的大小并保持不变。但稍后 jQuery UI 将恢复形状。

我还注意到“来源”选项对更高版本的 jQuery UI 没有影响。比如我用过

origin: ['bottom', 'right']

这对 jQuery UI 1.9 或更高版本没有影响。

那么如何在 jQuery UI 1.8 或更高版本中抑制 'restore' 并使 'origin' 生效？

Answer 1

创建了一个新功能，它将满足您的需求 fiddle

我从 effect 更改为 animate ，并修改 css top+left 以实现原始功能，请注意，默认情况下它会转到左上角。前任。

origin => ['bottom'] 与 ['bottom','left'] 相同

origin => ['right'] 与 ['top','right'] 相同等..

function size(object,to, origin, duration, callback){
    var leftResult = '+=0';
    var topResult = '+=0';
    if (origin != null && origin.length != 0){
        if ($.inArray('right', origin) >= 0){
            leftResult= '+='+to.width;
        }
        if ($.inArray('bottom', origin) >= 0){
            topResult= '+='+to.height;
        }
    }
    $(object).animate({
        height: to.height,
        width: to.width,
        left: leftResult,
        top: topResult
  }, duration, function() {
    if (typeof callback == "function") callback($(object));
  });
}

只需向参数添加验证，或根据需要更改回调。