Question

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

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

Answer 1

试试这个： -

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',

    });
  });

Answer 2

试试这个:(虽然我添加了新元素）

<强> 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

Answer 3

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

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

您可以在fiddle

看到

从右到左动画，不会消失

3 个答案: