jQuery Animate-边框颜色和宽度 [英] jQuery Animate - border color and width

问题描述

我似乎无法使这种jQuery动画在mouseenter上的图像上应用边框:

I cannot seem to get this jQuery animation working for applying a border to an image on 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部分，但也不起作用

I also tried removing the CSS part for the jQuery, but does not work either

推荐答案

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

$.animate() works only on CSS properties that have single numeric values. Thus, you only need to specify the border's width, as the border-color property is ignored by $.animate().

除此之外，事件是mouseenter，而不是mousenter.

Other than that, the event is mouseenter, not mousenter.

这是固定代码:

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

演示

这篇关于jQuery Animate-边框颜色和宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！