jQuery Animate – 边框颜色和宽度

我似乎无法让这个jQuery动画适用于在mouseenter上为图像应用边框：

jQuery的

 $('div img').mousenter(function(){ $(this).css({"border": "0px solid #f37736"}).animate({ 'borderWidth': '4px', 'borderColor: '#f37736' },500); }).mouseleave(function(){ $(this).animate({ 'borderWidth':'0px', 'borderColor:'#f37736' },500); }); 

我也尝试删除jQuery的CSS部分，但也不起作用

Answer 1

$.animate()仅适用于具有单个数值的CSS属性。 因此，您只需指定边框的宽度，因为$.animate()会忽略border-color属性。

除此之外，事件是mousenter ，而不是mousenter 。

这是固定代码：

 $('div img').mouseenter(function () { $(this).css({border: '0 solid #f37736'}).animate({ borderWidth: 4 }, 500); }).mouseleave(function () { $(this).animate({ borderWidth: 0 }, 500); }); 

演示

Answer 2

jQuery不能动画颜色，但它自己，你需要包含一个单独的jQuery插件。

Answer 3

将你的jQUERY更改为此

 $('div img').mouseenter(function(){ $(this).css("border", "0px solid #f37736").animate({ 'borderWidth': '4px', 'borderColor': '#f37736' },500); }).mouseleave(function(){ $(this).animate({ 'borderWidth':'0px', 'borderColor':'#f37736' },500); }); 

Answer 4

固定代码：

http://jsfiddle.net/9qwmX/491/

 $('div img').mouseenter(function () { $(this).css({ outline: "0px solid transparent" }).animate({ outlineWidth: '4px', outlineColor: '#f37736' }, 500); }).mouseleave(function () { $(this).animate({ outlineWidth: '0px', outlineColor: '#037736' }, 500); }); 

Answer 5

你的代码中有一些拼写错误

1. .mousenter应该是.mouseenter

2. 没有关闭'borderColor的撇号。 将它们更改为'borderColor'

 $('div img').mouseenter(function(){ $(this).css("border", "0px solid #f37736").animate({ 'borderWidth': '4px', 'borderColor': '#f37736' },500); }).mouseleave(function(){ $(this).animate({ 'borderWidth':'0px', 'borderColor':'#f37736' },500); });