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

Я также попытался удалить часть CSS для jQuery, но не работает ни

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

Demo

Answer 2

jQuery не может анимировать цвет, но сам по себе, вам нужно включить seperat e jQuery плагин для этого.

Answer 3

Исправлен код:

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 4

Изменить 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 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); 
});