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()）

＆＃13;

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

＆＃13;

html {margin:2em;}

#NoteWell button, #NoteWell2 button {
  display: none;
}

＆＃13;

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

＆＃13;

如何在悬停时顺利动画Bootstrap？

1 个答案: