jQuery Animate - 边框颜色和宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16793360/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Animate - border color and width
提问by DextrousDave
I cannot seem to get this jQuery animation working for applying a border to an image on mouseenter:
我似乎无法让这个 jQuery 动画为以下图像应用边框mouseenter：
<div>
<img src="http://25.media.tumblr.com/acc96259d6b2678985052c33e05a3062/tumblr_mkv9fhDBDS1rmc58qo1_500.jpg" />
</div>
jQuery
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);
});
I also tried removing the CSS part for the jQuery, but does not work either
我也尝试删除 jQuery 的 CSS 部分，但也不起作用
回答by Derek Henderson
$.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().
$.animate()仅适用于具有单个数值的 CSS 属性。因此，您只需要指定边框的宽度，因为 border-color 属性被 忽略$.animate()。
Other than that, the event is mouseenter, not mousenter.
除此之外，事件是mouseenter，不是mousenter。
Here is the fixed code:
这是固定代码：
$('div img').mouseenter(function () {
$(this).css({border: '0 solid #f37736'}).animate({
borderWidth: 4
}, 500);
}).mouseleave(function () {
$(this).animate({
borderWidth: 0
}, 500);
});
回答by Alex
jQuery cannot animate color but its own, you need to include a seperate jQuery plugin for that.
jQuery 不能动画颜色但它自己的，你需要包含一个单独的 jQuery 插件。
回答by Suthan Bala
Change your jQUERY to this
将您的 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);
});
回答by A. Wolff
Fixed code:
固定代码：
http://jsfiddle.net/9qwmX/491/
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);
});
回答by Pedro Estrada
You have some typos in your code
您的代码中有一些拼写错误
.mousentershould be.mouseenterdidnt close the apostrophe in both
'borderColor. change them to'borderColor'
.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); });
$('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); });
