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

除此之外，该事件是 mouseenter，而不是 mouseenter。

这是固定代码:

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

Demo