javascript - 如何在悬停时顺利地为 Bootstrap 制作动画？

Question

好的，所以我必须通过将鼠标悬停在它上面时显示按钮来扩展well。

我设法做到了，但扩张非常突然(你知道，就像突然出现和消失一样)。

我想问一下如何让它动画化，使悬停看起来更吸引人。

这是我现在拥有的:

var origWell= $('#NoteWell').html();
$("#NoteWell").hover(function(){
        $(this).html(originalContent + '<div type="button" class="btn btn-danger btn-md" title="Stop" data-content="Stop Note Conversion" onclick=stopNote()>Stop</div>');
        }, function(){
        $(this).html(origWell);
    });

相关的 HTML(根据要求)基本上是:

<div class="container">
    <div id="Currencies" class="row" align=center>
    <a data-toggle="tab" href="#Notes"><div id="CurrencyWell" class="well well-sm col-sm-2"><h4>Notes<br><span id="note">0</span></h4></div></a>
</div>

Answer 1

您可以使用 jQuery 幻灯片或淡入淡出效果(slideIn()、slideOut()/fadeIn()、fadeOut ())

$("#NoteWell").hover(function() {
  $(this).find('button').slideDown();
}, function() {
  $(this).find('button').slideUp();
});


$("#NoteWell2").hover(function() {
  $(this).find('button').fadeIn();
}, function() {
  $(this).find('button').fadeOut();
});

html {margin:2em;}

#NoteWell button, #NoteWell2 button {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="NoteWell" class="well">
  Button slides up/down
  <button type="button" class="btn btn-danger btn-md" title="Stop" data-content="Stop Note Conversion" onclick="stopNote()">Stop</button>
</div>

<div id="NoteWell2" class="well">
  Button fades in/out
  <button type="button" class="btn btn-danger btn-md" title="Stop" data-content="Stop Note Conversion" onclick="stopNote()">Stop</button>
</div>