jQuery animate border color on hover?

Question

Using a color plugin to animate background color on hover.

$(function() {
    $('.listing-2 li a').mouseover(function() {
        $(this).animate({
            backgroundColor: "#0e7796"
        }, 'fast');
    });
    $('.listing-2 li a').mouseout(function() {
        $(this).animate({
            backgroundColor: "#d6f2c5"
        }, 'fast');
    });
});

How can I do the same for border color?

possible duplicate of [jQuery animate backgroundColor](http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor) — mercator, Dec 03 '10 at 10:04
Make sure you load jQueryUI's [color plugin](http://jqueryui.com/animate/) first — bobobobo, Sep 13 '14 at 00:41

score 38 · Accepted Answer · answered May 01 '09 at 22:11

Found in google

    $('.listing-2 li a').mouseover(function() {
    $(this).animate({ borderTopColor: "#0e7796" }, 'fast');
});
$('.listing-2 li a').mouseout(function() {
    $(this).animate({ borderTopColor: "#fff" }, 'fast');
});

it must be a "borderTopColor" (or left, right, bottom) instead of "borderColor".

score 14 · Answer 2 · answered Jul 19 '10 at 20:46

14

To animate the color of the entire border use:

$(this).animate({ borderTopColor: '#59b4de', borderLeftColor: '#59b4de', borderRightColor: '#59b4de', borderBottomColor: '#59b4de' }, 'fast');

Apparently, you need to specify them all.

answered Jul 19 '10 at 20:46

C. Spencer Beggs

519
5
9

What does this setup offer more than setting up the entire "border-color" to animate? (see @michael's answer above) Is this setup is more browser compliant? – Lashae Mar 20 '12 at 09:56
I am not sure if this is still the same in the current version on jQuery, but when I answered the question you had to specify all of them, you could not animate borderColor as a whole. I dunno why. – C. Spencer Beggs May 14 '12 at 19:21

score 5 · Answer 3 · answered Feb 27 '13 at 08:09

I had a similar issue. I apparently didn't have the jQuery-UI file attached to my document. Once I attached it. Everything works perfectly with "C. Spencer Beggs" answer.

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

michael · Answer 4 · 2016-02-17T22:30:27.993

5

this works also.

$("div.item").hover(function() {
    $(this).stop().animate({"border-color": "#999999"}, "slow");
},
function() {
    $(this).stop().animate({"border-color": "#BFBFBF"}, "slow");
});

edited Feb 17 '16 at 22:30

answered Feb 13 '12 at 02:55

michael

686
2
11
21

How to use your code if div.item creates after dom generated? – Arsen Ibragimov Apr 29 '14 at 08:56

score 0 · Answer 5 · answered May 28 '14 at 07:41

0

jQuery animate only accept numeric values. See [docs]: http://api.jquery.com/animate/

You may use jQuery.Color plugin or use jQuery UI which extends animate and lets you use non-numeric values in animate.

Enjoy

answered May 28 '14 at 07:41

jhmilan

508
3
12

score 0 · Answer 6 · answered Feb 17 '16 at 22:57

As an alternative to the jQuery solutions, you can animate the border color with CSS transitions as well. Since you're animating the background-color with fast, you'd want to use a 200ms transition.

Your Case

.listing-2 li {
    border:1px solid #d6f2c5;
    transition: border 200ms ease-in-out;
}

.listing-2 li a:hover {
    border:1px solid #0e7796;
}

Generic Example

body {
  display: flex;
  justify-content: center;
}
.container {
  width: 50px;
  height: 50px;
  border: 1px solid #d6f2c5;
  transition: border 200ms ease-in-out;
}
.container:hover {
  border: 1px solid #0e7796;
}

<div class="container"></div>

score -5 · Answer 7 · edited Jun 21 '12 at 09:25

-5

You could try this:

$(this).animate({border: "3px solid #FFF55B"}, 100);

edited Jun 21 '12 at 09:25

Fionnuala

90,370
7
114
152

answered Sep 28 '10 at 16:57

John

3

jQuery animate border color on hover?

7 Answers7

Linked

Related