Как вы можете создать динамически созданную кнопку Bootstrap в jQuery?

Question

Я попытался добавить и установить положение в абсолютное, но динамически созданная кнопка не анимируется вообще.

$("#btn").click(function() { 
var $newguy = $('<li><button type="button" class="class-btn" id="class-name-num" data-toggle="modal" data-target="#class-modal">class_name</button></li>'); 
$("#class-listing").append($newguy); 
$("#class-name-num").animate({'marginTop:':"-=375px"},500); 
}); 

вот CSS:

.class-btn{ 
background-color: #bcd97d; 
list-style-type: none; 
font-size: 50px; 
display: inline-block; 
border: 0px solid #000; 
font-weight: bold; 
width: 500px; 
text-align: center; 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
z-index: 10; 
font-family: 'Lato', sans-serif; 
} 

Answer 1

На самом деле вы много проблем с вашим кодом.

Вы код неправильно внутри функции живого, это должно быть так:

$("#class-name-num").animate({'marginTop':-375},500); 

кнопку Также нужно быть блок.

$("#class-name-num").css({'display':"block"}); 

Также попробуйте использовать классы не идентификаторы в то время как вы можете добавить еще пункты ...

рабочий пример: http://jsfiddle.net/zhgn5vd4/