使用 hide() 淡出元素时的方向

Question

我正在使用 this fiddle 中显示的代码删除具有 hide() 提供的效果的 div。我试图让 div 淡出到它的右上角而不是左上角，但即使在选项中指定 direction:'right' 也无法让它工作。

有人知道这是否可行吗？提前致谢。

Answer 1

您当前使用的隐藏功能是 jQuery UI 中包含的扩展。该函数内部调用了animate函数（参考jQuery UI hide).

为了获得您正在寻找的效果，这里是片段：

$(function () {
  $('div').on('click', function () {
    $(this).hide('size', {
      to: {
        height: 0,
        width: 0,
        marginLeft: parseInt($(this).css('marginLeft'), 10) == 0 ? $(this).outerWidth() : 0
      }
    },
                 function () {
      $(this).remove();
    });
  });
});

div {
  cursor: pointer;
  width: 200px;
  height: 300px;
  background-color: #3b85c3;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div>
</div>

这里使用标准 animate 函数是相应的片段：

$(function () {
  $('div').on('click', function () {
    $(this).animate({
      height: 'toggle',
      width: 'toggle',
      marginLeft: parseInt($(this).css('marginLeft'), 10) == 0 ? $(this).outerWidth() : 0
    }, function () {
      $(this).remove();
    });
  });
});

div {
  cursor: pointer;
  width: 200px;
  height: 300px;
  background-color: #3b85c3;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div>
</div>

使用 hide() 淡出元素时的方向

Direction when fading out element with hide()

jquery

hide

direction