Question

我正在尝试让此调整大小对象正常工作。

当MouseDown（持有）时，对象调整为80px。
发布时，我希望对象恢复正常。

问题：当对象在MouseDown上从100px调整到80px时，可能会发生鼠标不再出现在对象本身中，因此释放鼠标不会再次触发“调整大小恢复正常”动画。

这就是为什么我尝试用这个解决方法：

 if (global.mouseup) and ($('#myimage').width('80px'))

完整代码： http://jsfiddle.net/G8Ste/568/

感谢您的帮助！

Answer 1

将mouseup处理程序绑定到将img的大小恢复正常的文档：

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

工作演示： http://jsfiddle.net/G8Ste/569/

关于您的代码的几点说明。

您没有定义global变量，因此您收到错误。
而不是and，您必须指&&。

编辑：当然，您可以像原始代码一样使用动画。在这里演示：http://jsfiddle.net/G8Ste/574/。其局限性在于您必须复制代码，在CSS和JavaScript中指定默认的宽度和高度。您可以通过任何方式解决这些问题，例如使用我在this answer中描述的技术，或使用jQuery-UI的.switchClass()和相关方法。使用jQuery-UI的示例：

$('#myimage').mousedown(function() {
    var img = $(this);
    img.stop().addClass("small", 50);
    $(document).one("mouseup", function(){
        img.stop().switchClass("small", "large", 150, function() {
            img.removeClass("large", 1000);
        });
    });
});

演示： http://jsfiddle.net/G8Ste/576/

jQuery调整对象

1 个答案: