javascript - 我怎么知道模态动画何时完成？

Question

我正在使用来自 twitter-bootstrap 的模态插件，我想知道模态花费的时间似乎之前显示警报。

在我做的这个例子中你可以明白我的意思: http://tinker.io/e69ff/6

HTML

<button id="mod" class="btn btn-primary btn-block" data-toggle="modal" data-target="#myModal">
    hello
</button>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
      Hello all!
  </div>
</div>

JS

$(function () {
     $("#mod").click(function(){ 
        $('#navigate-away').modal('show');
     });
});

CSS

#mod{
    margin-top: 100px;
}

---

但是文档中没有这方面的事件......有办法处理这个吗？任何提示或建议将不胜感激。

如果您需要更多信息，请告诉我，我会编辑帖子。

Answer 1

在文档中，您可以使用显示的事件来了解动画何时完成:

“已显示:当模式对用户可见时会触发此事件(将等待 css 转换完成)​​。”

$('#myModal').on('shown', function () {
  // do something… 
})