CODEWITHSUNDEEP
jquerycss
Sergio
Sergio

Reputation: 28837

jQuery animate css borderColor not working

I have a google map and when pressing a marker a infoBox opens, AND one div on a list of objects gets .style.borderColor="#FFF";

On mouseout of that infoBox I want it to go back to border-color:#000;

This works with javascript/jQuery

document.getElementById("rank_" + data.id).style.borderColor="#000"; //works good
$("#rank_" + data.id).css({borderColor: '#000'}); // also works good

this doesn't work

$("#rank_" + data.id).animate({ "border-color": "#000" }, 600);
//or
$("#rank_" + data.id).animate({ borderColor: "#000" }, 600);
//tried also this wich works but without animation
$("#rank_" + data.id).css({borderColor: '#000'}).animate({ borderColor: "#000" }, 900);

Any ideas on what I am missing?
simplified example here

Upvotes: 1

Views: 4343

Answers (3)

Djave
Djave

Reputation: 9329

jQuery doesn't support colour animation, I'd recommend a little plugin like http://www.bitstorm.org/jquery/color-animation/

Edit: as mentioned by @Ghillied, if you can be sure most targeted browsers support them, CSS3 transitions are probabaly a better solution all round! @Rikard has a nice example of this in his answer as well.

Otherwise, the bitstorm plugin really is very small in filesize, and would always be my preference for compatability (as my clients are depressingly stuck in browser stoneage)

Upvotes: 5

e-info128
e-info128

Reputation: 4072

Use jQuery UI:

$("#rank_" + data.id).animate({ borderColor: "#000" }, 600);

http://jqueryui.com/animate/#default Cross Browser rlz!

Upvotes: -1

Rikard
Rikard

Reputation: 7805

One alternative is to use just CSS: I use #one from your codepen example, but this should apply to the class of the div(s) you have.

#one {
    border:3px #0F0 solid;
    -moz-transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

http://codepen.io/anon/pen/xGIhu

Upvotes: 4

Related Questions