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，而非mousenter。

这是固定代码：

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

Demo

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

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

.mousenter应为.mouseenter
没有关闭'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);
});

jQuery Animate - 边框颜色和宽度

5 个答案: