jquery - jQuery Animate - 边框颜色和宽度

Question

我似乎无法让这个 jQuery 动画为以下图像应用边框mouseenter：

<div>
    <img src="http://25.media.tumblr.com/acc96259d6b2678985052c33e05a3062/tumblr_mkv9fhDBDS1rmc58qo1_500.jpg" />
</div>

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 属性。因此，您只需要指定边框的宽度，因为border-color 属性会被忽略$.animate()。

除此之外，事件是mouseenter，不是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 更改为此

$('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 3

jQuery 不能自己为颜色设置动画，您需要为此包含一个单独的 jQuery 插件。

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);
});