Jquery 由javascript创建的css动画

当按下按钮时，我试图创建一个带有css3动画定时器的div。这是代码：。出于某种原因，它不会创建div。我认为代码应该是功能性的，但我不确定在页面加载后是否可以使用css动画创建div

我的小提琴是基于这一点：

我正在使用以下内容创建div：

$("#btn1").click(function(){
jQuery('<div/>', {
    class: 'timer',
}).appendTo('#center');
jQuery('<div/>', {
    class: 'mask',
}).appendTo('#center');
});

$（“#btn1”）。单击（函数（）{
jQuery（“”{
类：“计时器”，
}).appendTo（“#center”）；
jQuery（“”{
类：'掩码'，
}).appendTo（“#center”）；
});

有什么想法吗

谢谢

---

p、 在一个稍微无关的注释上，我是否能够在计时器上覆盖内容，或者这是不可能的

您试图在对象存在之前查询它们

我的firefox中的css仍然存在漏洞，但javascript仍在运行

它用铬做了一些动画，我不知道这是不是你想要的效果

var cv=$（'.container'）.width（）；
$（'.head'）.css({
“高度”：（cv/3）+“px”
});
$（“#btn1”）。单击（函数（）{
jQuery（“”{
类：“计时器”，
}).appendTo（“#center”）；
var cw=$（'.timer'）.width（）；
$（'.timer'）.css({
“高度”：cw+“px”
});
jQuery（“”{
类：'掩码'，
}).appendTo（“#center”）；
});

我会通过JavaScript为

svg

的

path

元素设置动画来实现这一点

您可以通过更改

width

变量来设置计时器的

width

和

height

。您还可以通过

t

变量更改动画速度

var timer=document.getElementById（'timer'）；
var svg=document.getElementById（'svg'）；
var宽度=150；
setAttribute（'width'，width）；
setAttribute（'height'，width）；
var t=5；
varθ=0；
var radius=svg.getAttribute（'width'）/2；
setAttribute（'transform'，'translate（'+radius+'，'+radius+'））；
（函数animate（）{
θ+=0.5；
θ%=360；
var x=数学sin（θ*数学π/180）*半径；
变量y=数学cos（θ*数学π/180）*-半径；
变量d='M0,0V'+-radius+'A'+radius+'，'A'+radius+'1'+（（θ>180）？1:0）+'，1'+x+'，'y+'z'；
timer.setAttribute（'d'，d）；
设置超时（动画，t）
})();
正文{
背景:#333333；
文本对齐：居中；
}

javascript可以很好地创建div，CSS也可以。CSS也可以，但是当js创建div时就不起作用了。我想你的浏览器的工作方式与我的不同。而且javascript和CSS都坏了。谢谢。我会从这里开始处理它
var cv = $('.container').width();
$('.head').css({
    'height': (cv / 3) + 'px'
});

$("#btn1").click(function () {
    jQuery('<div/>', {
        class: 'timer',
    }).appendTo('#center');

    var cw = $('.timer').width();
    $('.timer').css({
        'height': cw + 'px'
    });

    jQuery('<div/>', {
        class: 'mask',
    }).appendTo('#center');
});