Question

I am developing a voice recorder function with PhoneGap on Android system. I’m testing on the Transformer Prime. I’m using jQuery and jQuery UI on top of PhoneGap’s JavaScript.

My question is this: When the user presses the Record button, how can I make that button flash to indicate that the app is recording?

Of course, the effect I want to create is to let the user know it’s still recording. Maybe I can set a timer to give the current recording duration, or something to that effect.

Unfortunately, I don’t know one of these effects. Could anyone give me a suggestion with the source code so that I can take it as a reference?

Answer 1

You can use CSS for that: http://jsfiddle.net/fszhJ/. Have a keyframe that sets the element invisible for the first half of the time, and visible for the other half. (You may want add other prefixes than only -webkit-.)

@-webkit-keyframes keyframe {
    from {
        visibility: hidden;
    }
    50% {
        visibility: hidden;
    }
    to {
        visibility: visible;
    }
}

div {
    width: 200px;
    height: 200px;
    background-color: black;
    -webkit-animation: keyframe 1s infinite;
}​