0

I have some prices that adjust based on radio button selections. I know how to make the numbers change based on the selections, but how do I simultaneously make them flash to grab the eye of the user?

I tried this: https://stackoverflow.com/a/11915453/5067193

And it works for the first radio button change, but not for any subsequent changes. I want it to flash every time the radio button selection changes.

Edit:

I found the answer that worked for me:

I had to add a setTimeout function so now my jquery code looks like (replace jq for $):

jq("input:radio").click(function(){
    console.log('radio clicked');

    jq("#price").addClass("flash");

    setTimeout( function(){
        jq("#price").removeClass("flash");
    }, 1000);


});

and my css for flash at the moment looks like:

.flash{

  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;

}

@-webkit-keyframes flash {
    0% { color:transparent;}
    50% { color:#FFF;}        
    100% {color:transparent;}
}

@-moz-keyframes flash {
    0% { color:transparent;}
    50% { color:#FFF;}        
    100% {color:transparent;}
}

@-ms-keyframes flash {
    0% { color:transparent;}
    50% { color:#FFF;}        
    100% {color:transparent;}
}
Community
  • 1
  • 1
Will
  • 465
  • 1
  • 3
  • 12
  • 1
    Post your code in your question please. – j08691 Sep 11 '15 at 14:07
  • Check out a comment in the Stackoverflow answer which you have referred. That has a solution to your problem. http://jsfiddle.net/daCrosby/eTcXX/1/ – mechanicals Sep 11 '15 at 14:12
  • Thank you @mechanicals, adding the timeout was the answer! I will edit my post to reflect the change – Will Sep 11 '15 at 14:40

1 Answers1

0

You can use that, but you need a "jQuery(selector).removeClass("flash");" first. So it removes and adds the flash everytime its called.

Something like this:

function $(".flashyRadio").click(function(){

$( "#price" ).removeClass( "flash" ).addClass( "flash" );

})
david tallon
  • 394
  • 2
  • 7
  • If you just remove the class after adding it, the animation wont work. Either you'll need to a timeout of sorts so that the animation finishes. – mechanicals Sep 11 '15 at 14:13
  • 1
    Thank you @davidtallon, unfortunately though I was not able to get your fix to work for me. I had to add a setTimeout function to get it to work as seen in my edit. – Will Sep 11 '15 at 14:42
  • timeout/remove is definitely a viable option as well. Full disclosure, I only tested the above method in Chrome. So it may have some unexpected results in other browsers. Glad you got it working! cheers. – david tallon Sep 11 '15 at 15:12