如何在悬停时流畅地对引导程序进行动画处理

How to smoothly animate a Bootstrap well on hover?

本文关键字：引导程序 处理 动画 悬停      更新时间：2023-09-26

好的，所以我必须在将鼠标悬停在它上面时显示按钮来展开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>
你可以

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

相关文章：