Question

我有以下代码：

但我希望效果能够向各个方向发展，而不仅仅是向右和向下。

我已经尝试过margin：0，auto和其他css和html样式，将它与中心对齐，但它不起作用。

由于

Answer 1

$('#myimage').mousedown(function() {
    var img = $(this);
    img.stop().animate({
        left: ['30px', 'swing'],   // left + (width - new width)/2
        top: ['60px', 'swing'],    // top + (height - new height)/2
        width: ['80px', 'swing'],
        height: ['80px', 'swing'],
    }, 50, 'swing');
    $(document).one("mouseup", function(){
        img.stop().animate({
            left: ['-5px', 'swing'], // left - (new width - width)/2
            top: ['25px', 'swing'],  // top - (new height - height)/2
            width: ['150px', 'swing'],
            height: ['150px', 'swing'],
        }, 150, 'swing', function() {
            $(this).animate({
                left: ['20px', 'swing'],
                top: ['50px', 'swing'],
                width: ['100px', 'swing'],
                height: ['100px', 'swing'],
            }, 1000, 'swing');
        });
    });
});

http://jsfiddle.net/diode/G8Ste/598/

编辑：

使其适用于所有带有myimage类的图像，如下所示在开始时存储所有图像的初始属性，通过运行一次

$(".myimage").each(function(i, img){ 

    $(img).data("width", $(img).width()); 
    $(img).data("height", $(img).height());
    $(img).data("left", parseInt($(img).css("left"),10)); 
    $(img).data("top", parseInt($(img).css("top"),10));

});

然后在mousedown处理程序

var img = $(this);

var ww = img.data("width"); 
var hh = img.data("height");
var left = img.data("left"); 
var top = img.data("top");

// then same code as last jsfiddle

Answer 2

您正在使用挥杆缓和效果。现有的具有您想要的行为的开箱即用的缓动效果。我看到的唯一方法是你写下自己的缓和效果，这是基于摆动算法。

Answer 3

我需要为左边和上边距设置动画，我认为......就像这样：

$('#myimage').mousedown(function() {
    var img = $(this);
    img.stop().animate({
        width: ['80px', 'swing'],
        height: ['80px', 'swing'],
        marginTop: ['20px', 'swing'],
        marginLeft: ['20px', 'swing'],
    }, 50, 'swing');
    $(document).one("mouseup", function(){
        img.stop().animate({
            width: ['150px', 'swing'],
            height: ['150px', 'swing'],
                marginTop: ['10px', 'swing'],
                marginLeft: ['10px', 'swing'],
        }, 150, 'swing', function() {
            $(this).animate({
                width: ['100px', 'swing'],
                height: ['100px', 'swing'],
                marginTop: ['15px', 'swing'],
                        marginLeft: ['15px', 'swing'],
            }, 1000, 'swing');
        });
    });
});

注意，我输入的值几乎肯定不正确......

Answer 4

您似乎应该使用Scale

Answer 5

http://jsfiddle.net/AJ66C/2/

从左边改变了css：20px;左：50px; 将中心计算为宽度/ 2 +顶部或左侧（它应始终保持相同）

$('#myimage').mousedown(function() {
        var img = $(this);
        img.stop().animate({
            width: ['80px', 'swing'],
            height: ['80px', 'swing'],
           top: ['60px', 'swing'],
            left: ['60px', 'swing'],
         }, 50, 'swing');
        $(document).one("mouseup", function(){
            img.stop().animate({
                width: ['150px', 'swing'],
                height: ['150px', 'swing'],
                top: ['25px', 'swing'],
                left: ['25px', 'swing'],
           }, 150, 'swing', function() {
                $(this).animate({
                    width: ['50px', 'swing'],
                    height: ['50px', 'swing'],
                top: ['75px', 'swing'],
                left: ['75px', 'swing'],
                 }, 1000, 'swing');
            });
        });
    });

Answer 6

以下jsFiddle将一个框放在另一个框内，当调整大小时，它将保持在父容器的中心位置。我认为这是你想要达到的效果。我使用负边距来保持内框居中。无论您使用的高度/宽度如何，只需将边距设置为宽度/高度的一半即可。

http://jsfiddle.net/G8Ste/594/

编辑：

我更新了上面的jsFiddle以处理相对大小调整。 mousedown函数中有2个变量，用于确定框的比例。 scaleDown是您希望缩小到mouseDown的原始大小的百分比，并且向上扩展是您想要在mouseUp上扩展到的原始大小的百分比。这适用于任何大小的盒子，因为所有的值都是计算而不是硬编码。

http://jsfiddle.net/G8Ste/600/

EDIT2：

现在，代码会在快速单击多次时检查框是否正在设置动画。代码将等到上一个动画完成后再重新制作动画。

http://jsfiddle.net/G8Ste/601/

EDIT3：

http://jsfiddle.net/G8Ste/613/

再次更新，以提高响应速度。我将代码转换为一个名为centeringEffect的插件。

<强>用法

$（ 'IMAGES'）centeringEffect（）;

选项

scaleDown：您希望图像缩小到mouseDown的百分比（默认值：.6） scaleUp：您希望图像在mouseUp上扩展到的百分比（默认值：.6）

中心效应

6 个答案: