亘古微博
咨询邮箱:nicholas@anycle.com
您的位置:网站首页 > 新闻动态 > 网络专题 >
[JS] How to stop animation of CSS3
来源:未知 作者:admin 发表于:2015-04-06 00:25  点击
The new CSS standards CSS3 has a definition of  "animation". This can make a div changing from one style to another.
But there is something wrong while I am trying to stop the animation which is running.

Such as : 
/************** Html Code *****************************/
<div class="house" id="house"></div>
<div class="hidden" id="one_0"></div>
 
/************ CSS Code  *******************/
.one_0 {position: absolute;left:50%;top:50%;margin:-40px 0 0 -30px;width:60px;height:80px;z-index:1px;background:red;-webkit-animation: one_0 8s 1 linear;animation-fill-mode:backwards; }
@-webkit-keyframes one_0 {
   0% { left:50%; top:50%;}
   20% { left:80%; top:70%;}
   40% { left:40%; top:90%; opacity:1.0; background:red;}
   100% { left:40%; top:90%; opacity:1.0; background:green;}
}
 
/************* JS Code *********************/
$("#house").click(function(e){
       $("#one_0").attr("className", "hidden");
       $("#one_0'").attr("className", "one_0");
});

/************* Result  ***********/
But it doesn't work.

Solution:
Even though I don't know what a bug about this, I found a solution which works.Just put the second action of JS code into a interrupt function. Like that: 
/************* JS Code  ************/
$("#house").click(function(e){
      $("#one_0").attr("className", "hidden");
      setTimeout('$("#one_0'").attr("className", "one_0")',1);
});

It works now!Wonderful!

By nicholas@anycle.com

相关文章推荐
[JS] Louver effect by jQuery

This is a simple solution of louver effect....

[JS] event.preventDefault()

This function will notify Web browser not to perform the default action ...

[JS] How to stop animation of CSS3

There is something wrong while I am trying to stop the animation which is running...

[PHP] isv.invalid-signature of Alibaba api

There is a project with open access platform of Alibaba which submit data need to...

[C] ‘for’ loop initial declarations are

create_tree.c:8:2: error: ‘for’ loop initial declarations are only allowed in...

[JS] indexOf()

Function indexOf() return the position of substr from the string....