How to add a JQuery custom animation

Question

I want to get my <dev> blink for short, lets say the border red, with jquery like:

$(element).fadeOut( 10 ).delay( 300 ).fadeIn( 10 )

so it fades out(fast!), 300 ms wait then fades back in (again fast)

I would like to have (something like):

$(element).css('border-color','red').delay( 300 ).css('background-color','')

or:

$(element).highlight(0,'red').delay( 300 ).highlight(0,:off)

My investigation brought me to JQuerys:

// Generate shortcuts for custom animations
jQuery.each({
slideDown: genFx("show"),
... ,
}, function( name, props ) {
jQuery.fn[ name ] = function( speed, easing, callback ) {
    return this.animate( props, speed, easing, callback );
};
});

and now I lost the oversight.

Is there anybody who can help me further?

Please dont give me tips how to solve it "otherways" (timers et all), I want to understand JQuery better, and I think that i am not far away, but - as mentioned - got stuck

(somehow a) duplicate to: "How does slideUp() work in jQuery? I'm trying to make my own slideRIght()"

question update

My question is not how to animate the border, I understand, that jquery does not like to animate 'colors', I would like to somehow extend JQuery to get a 0ms "animation" (from red to green eg) that fits into the jquery delay logic:

like:

$('foo').fadeBorder('red', 0).delay(300).fadeBorder(:none,0)

second update:

what if i would try to extend JQuery to animate a color? (I am not asking for an color animation aglorithm), creating an animation like fadeOut just call it makeGreen

Answer 1

jQuery queues its animations, but only if it knows them;

my first aproach:

$(element).css('border-color','red').delay( 300 ).css('background-color','green')

can't work, because .css() is executed immediately (to red to green then 300ms).

$(element).animate({borderColor: 'red}, time)

does not work because borderColor: is no valid animation (and red no valid value) so it 'falls through' off all animation logic.

The following are 2 working solutions, but i dont know if is recomended (allowed) to extend jQuery this way:

I extend jQueries jQuery.cssHooks with a set function for highlight

solution 1: Using CSS to control directly:

jQuery.cssNumber['highlight']=true // if not a number we get 'px' added to our 'state'
jQuery.cssHooks['highlight']={set: function (elem,state) {
      $(elem).css('border-color', state==1?'red':'');
      }
    };

$(element)
    .animate({highlight: 1},0)
    .delay(300)
    .animate({highlight: 0},0)

solution 2: Using a class name so I can control the "highlight" state via CSS:

jQuery.cssHooks['highlight']={set: function (elem,foo) {
    $(elem).toggleClass('highlight');
    }
};

$(element)
    .animate({highlight: 0},0)
    .delay(300)
    .animate({highlight: 0},0)

JSFIDDLE