jQuery在懸停時動畫邊框顏色？

使用color plugin爲懸停上的背景色創建動畫。jQuery在懸停時動畫邊框顏色？

$(function() { 
    $('.listing-2 li a').mouseover(function() { 
     $(this).animate({ 
      backgroundColor: "#0e7796" 
     }, 'fast'); 
    }); 
    $('.listing-2 li a').mouseout(function() { 
     $(this).animate({ 
      backgroundColor: "#d6f2c5" 
     }, 'fast'); 
    }); 
});

我該怎麼做邊框顏色相同？

來源

2009-05-01 Mike

可能重複http://stackoverflow.com/questions/ 190560/jquery-animate-backgroundcolor） – mercator 2010-12-03 10:04:09

確保先加載jQueryUI的[color plugin]（http://jqueryui.com/animate/） – bobobobo 2014-09-13 00:41:45

在谷歌

實測值

$('.listing-2 li a').mouseover(function() { 
    $(this).animate({ borderTopColor: "#0e7796" }, 'fast'); 
}); 
$('.listing-2 li a').mouseout(function() { 
    $(this).animate({ borderTopColor: "#fff" }, 'fast'); 
});

它必須是一個「borderTopColor」（或左，右，底部），而不是「BORDERCOLOR」。

來源

2009-05-01 22:11:10 Mike

要動畫整個邊框使用的顏色：

$(this).animate({ borderTopColor: '#59b4de', borderLeftColor: '#59b4de', borderRightColor: '#59b4de', borderBottomColor: '#59b4de' }, 'fast');

顯然，你需要指定他們。

來源

2010-07-19 20:46:54

這個設置提供的功能比設置整個「border-color」動畫還多嗎？（請參閱上面的@ michael's回答）此設置是否更符合瀏覽器？ – Lashae 2012-03-20 09:56:30

-5

你可以試試這個：

$(this).animate({border: "3px solid #FFF55B"}, 100);

來源

2010-09-28 16:57:04 John

這個作品也。

$("div.item").hover(function() { 
    $(this).stop().animate({"border-color": "#999999"}, "slow"); 
}, 
function() { 
    $(this).stop().animate({"border-color": "#BFBFBF"}, "slow"); 
});

來源

2012-02-13 02:55:43 michael

我有類似的問題。我顯然沒有附加到我的文檔的jQuery-UI文件。一旦我連接它。一切都完美符合「斯賓塞貝格斯」的答案。

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

來源

2013-02-27 08:09:09

jQuery只接受動畫數值。請參閱[文檔]：

您可以使用jQuery.Color插件或使用jQuery UI，它可以擴展animate並讓您在動畫中使用非數字值。

享受

來源

2014-05-28 07:41:05 jhmilan

作爲替代jQuery的解決方案，您可以用動畫CSS轉換邊框的顏色爲好。由於您使用fast動畫background-color，因此您希望使用200ms轉換。

你的案例

.listing-2 li { 
    border:1px solid #d6f2c5; 
    transition: border 200ms ease-in-out; 
} 

.listing-2 li a:hover { 
    border:1px solid #0e7796; 
}

通用實施例

body { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.container { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid #d6f2c5; 
 
    transition: border 200ms ease-in-out; 
 
} 
 
.container:hover { 
 
    border: 1px solid #0e7796; 
 
}

<div class="container"></div>

[jQuery的動畫的backgroundColor]（的

來源

2016-02-17 22:57:27

jQuery在懸停時動畫邊框顏色？

回答

相關問題