jQuery + RGBA color animations

前端 未结 3 2042
臣服心动
臣服心动 2020-11-28 11:07

Does anyone know if jQuery can handle an animation like:

rgba(0,0,0,0.2) → rgba(0,255,0,0.4)

I know there is a plugin to handle color animations, but thi

相关标签:
3条回答
  • 2020-11-28 11:57

    Using CSS3 animation (no javascript)

    You can also achieve the same effect using CSS3 animation. See below,

    Step 1: Create a keyframe for your animation

    @keyframes color_up {
        from {
            background-color: rgba(0,0,0,0.2);
        }
        to {
            background-color: rgba(0,255,0,0.4);
        }
    }
    

    Step 2: Use the animation rules.

      animation-name: color_up;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: ease-in-out;
    

    DEMO: http://jsfiddle.net/2Dbrj/3/

    Using jQuery

    jQuery now supports color animation with RGBA support as well. This actually animates from one color to other.

    $(selector).animate({
      backgroundColor: 'rgba(0,255,0,0.4)'
    });
    

    DEMO: http://jsfiddle.net/2Dbrj/2/

    0 讨论(0)
  • 2020-11-28 11:58

    Uh, nevermind. Found an amazing modification to the jquery color plugin.

    http://pioupioum.fr/sandbox/jquery-color/

    0 讨论(0)
  • 2020-11-28 12:04

    use jquery UI for handle that, $(object).animate({color : 'rgba(0,0,0,.2)'},500)

    0 讨论(0)
提交回复
热议问题