Question

我有一些风格的块：

#block{
    position: absolute;
    width: 290px;
    height: 200px;
    background-color: #a71;
    right: 90px;
    margin-top: -5px;
}

我按如下方式更改其属性：

$('#block').animate({
        height: '545px',
        width: '680px',
        left: '50%',
        top: '50%',
        marginTop: '-282.5px',
        marginLeft: '-350px'
    }, 1000);

但是我怎样才能将该块恢复到初始状态？此代码不起作用：

$('#block').animate({
        top: 'auto',
        left:'auto',
        marginLeft: 'auto',
        height: '200px',
        width: '290px',
        marginTop: '-5px',
        right: '90px'       
    }, 1500);

它的工作原理如下，但没有动画：

$('#block').css({
        'top': 'auto',
        'left':'auto',
        'marginLeft': 'auto',
    });

Answer 1

将

“auto”设置为某个值（即50％）后，

“auto”无效。在渲染完成之后和开始动画之前，您应该获得顶部和左侧值。试验$('#block').offset() smt。像：

$(function() {
  var offset = $('#block').offset();

  $('.some-btn').click(function() {
    $('#block').animate({
      height: '545px',
      width: '680px',
      left: '50%',
      top: '50%',
      marginTop: '-282.5px',
      marginLeft: '-350px'
    }, 1000);
  });

  $('.some-other-btn').click(function() {
    $('#block').css({
      'top': offset.top,
      'left':offset.left,
      'marginLeft': 'auto',
    });
  });
});

Answer 2

您无法设置auto的动画，以便代码永远无法正常工作

通过在设置变量动画之前设置top，left和margin-left位置，您可以获得更好的服务。然后，当您想要回溯动画时，您可以提供实际的初始值，而不仅仅是auto

要在那里制作动画......

var originalTop = $('#block').css('top');
var originalLeft = $('#block').css('left');
var originalMarginLeft = $('#block').css('margin-left');

// Animate away from initial state...
$('#block').animate({
    height: '545px',
    width: '680px',
    left: '50%',
    top: '50%',
    marginTop: '-282.5px',
    marginLeft: '-350px'
}, 1000);

// Animate back to initial state...
$('#block').animate({
    top: originalTop,
    left: originalLeft,
    marginLeft: originalMarginLeft,
    height: '200px',
    width: '290px',
    marginTop: '-5px',
    right: '90px'       
}, 1500);

Answer 3

这里的方法相同，汽车就不行了。您可以将值存储在某些变量上，如果调整大小不是问题，可以在以后使用它们。

我不确定，但也许你可以在#block下面创建一个隐藏元素，并在你动画回来时使用它的位置。

希望它有所帮助！

Answer 4

它的工作原理如下：

$('#block').animate({
        height: '545px',
        width: '680px',
        **right:** '50%',
        top: '50%',
        marginTop: '-282.5px',
        **marginRight:** '-350px'
    }, 1000);

和

$('#block').animate({
        marginRight: '0px',
        top: curTop,
        height: '200px',
        width: '290px',
        marginTop: '-5px',
        right: '90px'       
    }, 1500);

Answer 5

在动画完成时使用JS而不是jQuery来重置CSS状态。

试试这个：

$('#block').animate({
    top: 'auto',
    left:'auto',
    marginLeft: 'auto',
    height: '200px',
    width: '290px',
    marginTop: '-5px',
    right: '90px'       
    }, 1500,function(){
    document.getElementById("block").style.left = 'auto';
});

jQuery动画。如何在auto中设置top和left

5 个答案: