jQuery动画 - 边框颜色和宽度

Question

我似乎无法使用jQuery动画，在鼠标进入时为图像应用边框。

<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部分，但仍然不起作用

- DextrousDave

---

你只是有几个打字错误。请查看更正后的代码片段：http://jsfiddle.net/h6jg4/ - Petr Čihula

只是好奇，你的浏览器里没有控制台吗？ - A. Wolff

Answer 1

$.animate() 只能使用具有单一数字值的 CSS 属性。 因此，您只需要指定边框的宽度，因为边框颜色属性会被 $.animate() 忽略。

除此之外，事件应为 mouseenter，而不是 mousenter。

以下是修正后的代码：

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

演示

- Derek Henderson

---

有没有办法让动画更加流畅，这样当应用边框时图像就不会移动了呢？我可能可以通过将边框颜色从白色（背景）更改为橙色来实现，但你说在.animate()中不能使用颜色。 - DextrousDave

如果您也使用jQuery UI，您可以通过过渡效果将background-color属性动画化，从4px的白色背景过渡到4px橙色背景。 - Derek Henderson

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

- Suthan Bala

Answer 3

jQuery本身无法执行颜色动画，您需要使用单独的jQuery插件来实现。

- Alex

---

你能具体说明是哪个插件以及在哪里获取吗？ - ChaosFreak

@ChaosFreak 这个问题太老了，很多东西都变了。现在你可以使用CSS过渡动画来实现颜色动画。 - Alex

谢谢，@Alex。我查看了CSS转换的文档，但是我不知道如何使用jQuery触发它们。然而，jquery-ui-color插件正好可以满足我的需求。 - ChaosFreak

你可以使用jQuery或JavaScript向元素添加或删除类。通过CSS，您可以为这些类定义过渡效果，例如： - Alex

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

- A. Wolff

---

有什么方法可以使过渡更平滑，以便图像不会移动吗？谢谢。 - DextrousDave

@roasted，你的边距解决方案会使它变得更加不流畅，而不是更流畅！ - Derek Henderson

抱歉，但为了实现流畅的动画/过渡效果，最好使用CSS3而非jquery。:hover CSS伪类是一个不错的开始。 - A. Wolff

我知道，但是JavaScript在浏览器中的支持比CSS3更好，所以我现在想坚持使用它。 - DextrousDave

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

- Pedro Estrada