Flicker before item is clicked

Question

I have a treasure box(an image that when clicked displays a fancybox which in-turn calls a table in the database Learner_Treasure).

The user chooses a treasure and that treausre is stored in the Learner_Treasure table and is displayed in the treasure box.

However there is no form of feedback when an item is stored into the treasure box (So the user never knows when the is changes in the contents of their treasure box).

What i want to do is make it flicker when there is a new item, until the user presses to open up the fancybox.

Anyone know how to do this? Any similar examples will help.

you could highlight it with jQueryUI https://api.jqueryui.com/highlight-effect/ — GrafiCode, Oct 04 '15 at 12:02

score 0 · Accepted Answer · edited May 23 '17 at 12:29

0

I think this SO answer is what you want.

Define your css like this

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.treasure-blink {
    animation: blink 1s;
    animation-iteration-count: infinite;
}

And apply it whenever it's applicable with jQuery like this

$("your-selector").addClass("treasure-blink")

edited May 23 '17 at 12:29

Community

1
1

answered Oct 04 '15 at 12:01

Johan Gov

1,262
1
13
26

Flicker before item is clicked

1 Answers1