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而不是圆形，我已经给它一个余地给它向上和向左增长的空间，但我希望你能得到这个想法。

让我知道你对此的看法。

Answer 2

你可以这样做，

$(".corner").click(function(e){
    $new_width = $(e.target).width() + e.clientX;
    $new_height =  $(e.target).height() + e.clientY;
    $(e.target).animate(
        { top:0, left:0, width: $new_width, height: $new_height }, 1000
    );
});

以下是jsfiddle

的示例

jquery动画从右到左顶部

2 个答案: