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