javascript - 从下到上取消隐藏div

Question

我有一个像图片一样带有棕色 Twig 的 div，我需要隐藏它，当单击一个按钮时，从下到上取消隐藏，就好像它有一个蒙版一样。我无法用自下而上的幻灯片(例如在 jquery 中)显示它，因为顶部有叶子和东西，所以我想到的最好的想法是用某种掩码取消隐藏。

现在我有这个:

$('.button').click(function () {
        $('#branchmain').show('slide', {direction: 'down'}, 1000);
  });

#branchmain {
    background-image: url(http://i.imgur.com/IV2C28A.png);
    background-repeat: no-repeat;
    display:none;
    width: 114px;
    height: 307px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class="button">Click me!</div>
<div id="branchmain"></div>

我怎样才能对 div 应用 mask 并从下到上取消隐藏它？我不希望它从底部移动到顶部，而是要显示它。有办法吗？

Answer 1

如果您使用“盲”效果而不是“滑动”效果，效果很好。

如果您需要在其他图像前面显示树，请使用分层 div。

$('.button').click(function () {
        $('#branchmain').show('blind', {direction: 'down'}, 1000);
  });

#branchmain {
    background-image: url(http://i.imgur.com/IV2C28A.png);
    background-repeat: no-repeat;
    display:none;
    width: 114px;
    height: 307px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class="button">Click me!</div>
<div id="branchmain"></div>