jQueryで文字色を少しずつ変化
animateを使って色を変更
animateで色を変更
jQueryだけでは色は変化しないので、jQuery UIを使用。
jQuery
$(function () {
// デフォルト色を取得
var default_color = $('#side').css('color');
$('#main').hover(function() {
// 徐々に色が変化
$('#side').animate({
'color' : '#2a61fe'
}, 'slow');
}, function(){
// 元に戻す
$('#side').css('color', default_color);
});
});
colorだけでなく、background-color、border-colorなどもjQuery UIを使うことで対応可。
サンプル
fadeToで透過
濃淡を変更するだけであればfadeToで代用可。この場合、jQuery UIは不要。
jQuery
$(function () {
$('#main').hover(function() {
// 徐々に透過
$('#side').fadeTo('slow', 0.3);
}, function(){
// 元に戻す
$('#side').css('opacity', 1);
});
});
