zoukankan      html  css  js  c++  java
  • 【记】jQuery animate方法中对borderradius的动画存在的问题解决

        jQuery的animate方法可以通过修改css样式设置时间来实现动画效果,今日尝试用animate对CSS3中的border-radius属性进行动画实现。但这遇到了一个问题,animate在对border-radius进行变化的时候,总是从0px像素开始,而不是预先的css样式开始变化的。

        比如一个#test的border-radius:10px,现在通过jquery写:$('#test').animate({borderRadius:30},1000); 想法是一开始有个半径10像素圆角div,然后通过JS在1秒内实现从10px到30px的圆角变化,但是,浏览器的实际变化不是从10-30,而是从0-30,这不是我想要的!

        解决这个办法其实比较简单,但是有点略繁琐,总结一下,就是将borderRadius拆成四个角写,这样就对了。例如:

    $(this).animate({
      borderTopLeftRadius:30,
      borderTopRightRadius:30,
      borderBottomLeftRadius:30,
      borderBottomRightRadius:30,

    },500);  

        这样就可以了!如果你要兼容稍微早一些的浏览器版本,那就更麻烦了,所有的都要拆成四个角分别处理。至于为什么要这样,我还不知道,不知道这是jquery的bug还是什么问题

  • 相关阅读:
    C#设计模式-原型模式
    C#设计模式-建造者模式
    c#设计模式-组合模式
    c#设计模式-适配器模式
    c#设计模式-命令模式
    c#设计模式-观察者模式
    c#设计模式-工厂方法
    C#设计模式-简单工厂
    C#设计模式-工厂模式
    C#设计模式-单例模式
  • 原文地址:https://www.cnblogs.com/echoloyuk/p/2348031.html
Copyright © 2011-2022 走看看