jquery 动画从右下到左上

Question

我正在尝试制作一个响应式网页，如果您单击屏幕中间的圆圈，div 将从圆圈放大到网页的左上角。你需要的是一个负面的高度......我在网上搜索了很长一段时间但找不到答案，虽然我认为这是一个很常见的问题......

虽然这段代码不起作用，但大致应该是这样的:

$(".corner").click(function(){
    $(this).animate({width: '-400px', height: '-400px'}, 1000);
});

Answer 1

我不完全确定您的解决方案到底有什么问题，但我想出了一些替代方案。它涉及将 div 大小调整为 +400px/+400px 并重新定位，而不是调整为负宽度/高度。

这是相关的 JS，根据您自己的稍作修改:

$(".corner").click(function(){
    $(this).css({position: 'relative'});
    $(this).animate({right: '400px', bottom: '400px', width: '400px', height: '400px'}, 1000);
});

和a supplementary JSFiddle以及。我使用的是方形 div 而不是圆形，并且我给它留出了向上和向左增长的空间，但我希望你能理解这个想法。

让我知道您对此有何看法。