CODEWITHSUNDEEP
jqueryjquery-animatedelay
halfbit
halfbit

Reputation: 3939

How to add a JQuery custom animation

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

Upvotes: 0

Views: 740

Answers (2)

halfbit
halfbit

Reputation: 3939

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

Upvotes: 0

tckmn
tckmn

Reputation: 59283

You could try something like:

$('selector').css('border', '0px solid red')
             .animate({borderWidth: 5}, 300)
             .delay(300)
             .animate({borderWidth: 0}, 300)

First set the border's properties, then animate it to 5px width, wait a bit, then animate back.

JSFiddle

You could make it a plugin too:

$.fn.borderFlash = function(width, color, time, delay) {
    if (width === undefined) width = 5
    if (color === undefined) color = 'red'
    if (time === undefined) time = 300
    if (delay === undefined) delay = 300
    return this.css('border', '0px solid ' + color)
               .animate({borderWidth: width}, time)
               .delay(typeof delay === 'undefined' ? 300 : delay)
               .animate({borderWidth: 0}, time)
}

$('#selector').borderFlash()

JSFiddle

Upvotes: 1

Related Questions