Question

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

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

Answer 1

您当前使用的隐藏功能是jQuery UI中包含的扩展。此函数在内部调用animate函数（请参阅jQuery UI hide)。

为了获得您正在寻找的效果，请点击以下链接：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

相反，使用标准animate功能是相应的代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用hide（）淡出元素时的方向

1 个答案: