CSS创建的动画 [英] css animations created by javascript

问题描述

我试图创建一个带有css3动画定时器的div，当按下按钮。 heres代码： http://jsfiddle.net/arcco96/y5nov6rz/1/ 。由于某种原因，它不会创建div。我认为代码应该是功能，但我不知道是否可以在页面加载后使用CSS动画创建一个div。

我的小提琴是基于这个： http：/ /jsfiddle.net/zbGCq/118/ 。

我创建了div：

  $ btn1）。click（function（）{
 jQuery（'< div />'，{
 class：'timer'，
}）appendTo（'＃center' ; 
 jQuery（'< div />'，{
 class：'mask'，
}）appendTo（'＃center'）; 
}）; 
  

有任何想法吗？

p>

ps在一个稍微不相关的笔记，我将能够覆盖#timer上的内容，否则这是不可能的？

解决方案

您在尝试存在jquery对象之前。

css仍然在我的firefox破碎，但是javascript是工作，

它在铬的动画，我不知道这是你想要的效果还是不。

http://jsfiddle.net/Lbuseo9j/

  var cv = $（'。container'）。 
 $（'。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'）; 
}）; 
  

I am trying to create a div with a css3 animated timer in it when a button is pressed. heres the code: http://jsfiddle.net/arcco96/y5nov6rz/1/. For some reason it will not create the div. I think the code should be functional but I am not sure whether or not one can create a div with a css animation after the page load.

My fiddle is based on this one: http://jsfiddle.net/zbGCq/118/.

I am creating the div with:

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

Any thoughts?

thanks

p.s. on a slightly unrelated note will I be able to overlay content on the #timer or will that be impossible?

解决方案

You were trying to jquery objects before they existed.

the css is still broken in my firefox, but the javascript is working,

It does something animated in chromium, I don't know if that's the effect you want or not.

http://jsfiddle.net/Lbuseo9j/

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

这篇关于CSS创建的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！