动画从右下到左上，而不是dissapear

Animate right bottom to left up and not dissapear

本文关键字：dissapear 动画      更新时间：2023-09-26

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

http://jsfiddle.net/ra04roza/

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

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

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);
  });

Fiddle here

试试这个：-

演示

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',
    });
  });

如果我理解你想要实现的目标，你需要应用回调函数（完成时会发生什么，也就是完整函数。

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

你可以在小提琴上看到

相关文章：