jQuery UI Highlight Effect - how can I use the border?

Question

I try to use highlight in jQuery but color works but border doesn't work. How can I use the border? border: 2px solid #32a511

$("div").click(function () {
      $(this).effect("highlight", {
color: '#effdeb', border: '2px solid #32a511'}, 3000);
});

http://stackoverflow.com/questions/813493/jquery-animate-border-color-on-hover — Banana, Apr 23 '15 at 18:47
Thank you for comment but I would like to use border with color. I use only color it works but not with border. — siuri, Apr 23 '15 at 19:16
It is not exclusive, you can still use both, just replace the "border" argument with the ones from the other question. — Banana, Apr 23 '15 at 19:20
I'd tried to do it but it doesn't work. Could you give me a example? I can better understand it. Thanks, — siuri, Apr 23 '15 at 19:25
I don't think jQuery accepts 'border' as an argument for the highlight effect. See: [here](http://www.tutorialspoint.com/jquery/effect-highlight.htm) and [here](http://jquery-ui.googlecode.com/svn/tags/1.8.7/docs/effect-highlight.html#demo) — Daniel Falabella, Apr 23 '15 at 19:28

score 3 · Accepted Answer · answered Apr 25 '15 at 12:28

the jQuery .effect() simply applies pre-made animations to your element. as per Daniel's comment, it seems that the highlight effect does not work on borders.

instead, you could use the jQuery .animate() to animate your div manually:

$("div").click(function() {
  $(this).animate({
    "background-color": '#effdeb',
    "border-color": "32a511",
    "border-width": "2px"
  }, 500);
});

div {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 1px solid black;
  box-sizing:border-box;
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>

jQuery UI Highlight Effect - how can I use the border?

1 Answers1