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"});

同时尝试使用类而不是ID，同时可以添加其他项...

工作示例： http://jsfiddle.net/zhgn5vd4/

如何在jQuery中为动态创建的Bootstrap按钮设置动画？

1 个答案: