从右下角到左上角动画并且不消失答案

【问题标题】：Animate right bottom to left up and not dissapear从右下角到左上角动画并且不消失
【发布时间】：2014-10-15 07:35:27
【问题描述】：

我想从右下角到左上角为 DIV 设置动画，当高度和宽度为 0px 时，然后消失，当我想在不同的轴 (-x, y) 上看到该框时，我看不到这个框。

  $("button").click(function(){
    $("div").animate({
      height:'-=150px',
      width:'-=150px'
    });
  });

【问题讨论】：

我要调整大小效果
如果你调整高度
伙计，你得到了 3 个答案，做了 3 件完全不同的事情。如果我是你，我会重新格式化我的问题
首先，您必须调整 div 的大小才能再次看到它。 jsfiddle.net/ra04roza/6

标签： javascript css html jquery-animate

【解决方案1】：

试试这个：（虽然我添加了新元素）

HTML

<button>Start Animation</button>
<div class = "div1" style="background:#98bf21;top:250px;left:250px;height:100px;width:100px;position:absolute;">
</div>

<div class = "div2" style="background:#98bf21;top:250px;left:250px;height:0px;width:0px;position:absolute;">
</div>

jQuery

$("button").click(function(){
    $(".div1").animate({
      height:'-=150px',
      width:'-=150px'
    }, 1000);

    $(".div2").animate({
      height:'+=100px',
      width:'+=100px',
      top: '-=100px',
      left: '-=100px'
    }, 1000);
  });

小提琴here

【讨论】：

那么如果你再次点击开始动画呢？我不认为这是正常的
谢谢，我想要这个演示！，第二步，调整绿色框的大小。

【解决方案2】：

试试这个：-

DEMO

HTML:-

<button>Start Animation</button>
<div style="background:#98bf21;top:100%;right:0px;height:100px;width:100px;position:absolute;">
</div>

  $("button").click(function(){
    $("div").animate({
      right:'100%',
      top:0,
      opacity:'0.5',

    });
  });

【讨论】：

在这个演示中，你移动盒子，我想要调整大小效果......从右下到左上。

【解决方案3】：

如果我了解您想要实现的目标，您需要应用回调函数（完成后会发生什么，又名 complete function。

$("button").click(function(){
  $("div").animate({
    height:'-=150px',
    width:'-=150px'
  }, function(){
       $(this).css( {top: '1000px',
                     left: '800px' });
  });
});

你可以在你的fiddle看到

【讨论】：