GIF met JS en CSS

Hey,

Ik heb een GIF, en die moet bij het opstarten aanspringen zodat mensen weten:
Dat moet ik aanklikken.

Via CSS en JS wil ik dit doen ipv een plaatje, want dat vind ik beter en mooier werken.
En het plaatje moet dus knipperen, en als er iets is aangeklikt gewoon volledig blauw worden (dat lukt me wel).

Hoe zouden jullie het doen? Met JS/jQuery en CSS?

Hierbij t plaatje:
Gr Bart

Je kan het doen met animate in CSS3, maar daar sluit je oude browsers mee uit. Ik gok dus dat je het beste af bent met javascript/jQuery en dan de border-color laten animeren in een loop.

Rik schreef:

Je kan het doen met animate in CSS3, maar daar sluit je oude browsers mee uit. Ik gok dus dat je het beste af bent met javascript/jQuery en dan de border-color laten animeren in een loop.

Zal ik dat eens proberen, maar het wordt maar op 1 browser afgespeeld, want het is een offline webserver met website. Maar ik zal eens gaan proberen het goed voor elkaar te krijgen met een loop en border-color. GIF is denk ik namelijk niet de beste oplossing om dit te laten combineren met jQuery functies

Misschien heb je hier wat aan. Dit heb ik gevonden op het internet, niet mijn eigen code:
http://jsfiddle.net/Ue4wy/4/

Je kan volgens mij ook jQuery animate gebruiken, not sure.

alweer het verkeerde topic

http://jsfiddle.net/62vc35qk/3/

Heb je alleen wel jQuery UI voor nodig.

Ruben schreef:

http://jsfiddle.net/62vc35qk/3/

Heb je alleen wel jQuery UI voor nodig.

Not sure how that works....

Dylanh schreef:

Eerdere citaten tonen

Ruben schreef:

http://jsfiddle.net/62vc35qk/3/

Heb je alleen wel jQuery UI voor nodig.

Not sure how that works....

Wat?

toevoeging op 8 oktober 2014, 20:46:21:
Met setInterval is hij trouwens wat mooier:
http://jsfiddle.net/62vc35qk/4/

toevoeging op 8 oktober 2014, 20:47:08:
Of een anonymous function:

setInterval(function() {
    $(#ding).toggleClass(active, 500);
}, 500);

Hoe kan die zo overgaan van zwart naar wit? Nu fade hij naar zwart en rood maar ik verwachte knipperen als je naar de code kijkt

Vereist toggleClass jQuery UI dan? Volgens mij kan het ook met CSS animaties / keyframes, maar daar ken ik te weinig van om je advies te geven.

toevoeging op 8 oktober 2014, 21:40:24:

Dylanh schreef:

Hoe kan die zo overgaan van zwart naar wit? Nu fade hij naar zwart en rood maar ik verwachte knipperen als je naar de code kijkt

Denk eens logisch na, de class .active word aan / uit getoggled, en zie eens wat die van CSS heeft:

.active { border: 3px solid red; color: red; }

Dylanh schreef:

Hoe kan die zo overgaan van zwart naar wit? Nu fade hij naar zwart en rood maar ik verwachte knipperen als je naar de code kijkt

Omdat je de toggle over een periode van 500 milliseconden doet. jQuery magic.

Raaoul schreef:

Vereist toggleClass jQuery UI dan? Volgens mij kan het ook met CSS animaties / keyframes, maar daar ken ik te weinig van om je advies te geven.

toevoeging op 8 oktober 2014, 21:40:24:

Dylanh schreef:

Hoe kan die zo overgaan van zwart naar wit? Nu fade hij naar zwart en rood maar ik verwachte knipperen als je naar de code kijkt

Denk eens logisch na, de class .active word aan / uit getoggled, en zie eens wat die van CSS heeft:

.active { border: 3px solid red; color: red; }

Volgens mij werkt jQuery animate dus niet met border, background enzo. Stukje uit de documentatie van animate:

jQuery:
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.