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

Question

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

有谁知道这是否可能？提前谢谢。

Answer 1

你目前使用的隐藏函数是jQuery UI中包含的扩展。此函数在内部调用 animate 函数（请参阅 jQuery UI 隐藏）。

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

$(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>