Как плавно анимировать бутстрап хорошо на зависании?

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>