菜單在鼠標懸停時淡入淡出

<ul style="#" class="hmenu"> 
    <li class="active selected"><a href="#">Home</a></li> 
    <li><a href="#">Facebook</a></li> 
    <li><a href="#">Twitter</a></li> 
</ul>

我有一個菜單，其中一個鏈接爲active。我使用這個腳本來切換懸停菜單在鼠標懸停時淡入淡出

$('.hmenu li').on('mouseenter', function() { 
    $('.hmenu li').removeClass('active'); 
    $(this).addClass('active'); 
}); 
$('.hmenu li').on('mouseleave', function() { 
    $(this).removeClass('active'); 
    $('.hmenu li[class=selected]').addClass('active'); 
});

活動類這項工作的，但我想改變它，這樣，當我將鼠標懸停任何一個環節，在鼠標離開鏈接應該淡入淡出和。

我無法理解這一點 - 我該怎麼做？

這裏是小提琴：http://jsfiddle.net/GdSUg/

來源

2013-05-21 XTop

你是什麼'的鏈接的意思應該淡入淡出和'..ü的意思是說底色顏色應該淡入淡出..有點困惑.. – bipen

是的..在鼠標上它的背景顏色應該淡入和在mouseleave上它應該淡出 – XTop

添加：

transition: all 1s;

的CSS代碼中的類。主動

this is an example

更多信息請參閱參考：Here

來源

2013-05-21 19:32:30

這是否適用於所有瀏覽器？（提示http://caniuse.com/#feat=css-transitions） –

你忘了在'.hmenu li'上設置'transition'來淡出效果 –

@BenjaminGruenbaum你爲什麼問你什麼時候你已經知道了答案。 '：P' –

CSS轉換是一種方法。另一個是使用內置switchClass功能的jQuery UI。 Using your demo：

$('.hmenu li').hover(function() { 
    if (!$(this).hasClass('active')) $(this).switchClass('','active', 200); 
}, function() { 
    $(this).switchClass('active', '', 200); 
});

需要

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

參考：http://jqueryui.com/switchClass/

您可能會注意到怪異的行爲時，迅速將鼠標懸停在需要延遲的過渡元素（即 - 褪色，幻燈片） - 考慮使用hoverIntent：

什麼是hoverIntent？ hoverIntent是一個插件，試圖確定用戶的意圖...像一個水晶球，只有用鼠標運動！它類似於jQuery的懸停方法。但是，不是立即調用handlerIn函數，而是，hoverIntent等待直到用戶的鼠標在撥打電話之前就已經變得足夠慢了。爲什麼？延遲或防止意外觸發動畫或ajax調用。簡單超時適用於小範圍，但是如果您的目標範圍很大，它可能會執行而不管意圖如何。這就是hoverIntent進來......

來源

2013-05-21 19:34:39 Josh

您的解決方案有奇怪的行爲....嘗試在所有鏈接上水平和快速移動鼠標 – XTop

這是hover/mouseenter/leave的固有問題並定時淡入淡出。您可以通過編寫處理該問題的/ [使用其他代碼]（http://cherne.net/brian/resources/jquery.hoverIntent.html）來解決此問題。這不是我的*解決方案，它是一個jQuery解決方案。 :) – Josh

有你去

$('.hmenu li').hover(function() { 
    $(this).animate({ 
     backgroundColor: "#89B908" 
    }, 300); 
}, function() { 
    $(this).animate({ 
     backgroundColor: "#FFF" 
    }, 1); 
});

Fiddle

來源

2013-05-21 19:49:15

但我需要在懸停和選定的li上添加活動類。 – XTop

http://jsfiddle.net/49ef9/這一個做前景色。你可以保留你以前使用的addClass –

@XTop這裏http://jsfiddle.net/Exn8v/ –

要動畫顏色可靠地使用jQuery，你需要使用JQuery的顏色插件（https://github.com/jquery/jquery-color）。然後，您可以做類似如下：

var active = { 
    backgroundColor: '#89B908', 
    color: '#FFF' 
}, 
inactive = { 
    backgroundColor: '#FFF', 
    color: '#000' 
}; 

$('.hmenu li').on('mouseenter', function() { 
    $(this).animate(active, function() { 
     $('.hmenu li').removeClass('active').css(inactive); 
     $(this).addClass('active').css(active); 
    }).find('a').animate({ 
     color: '#FFF' 
    }); 
}); 
$('.hmenu li').on('mouseleave', function() { 
    $(this).animate(inactive, function() { 
     $(this).removeClass('active'); 
     $('.hmenu li.selected').addClass('active').css(active); 
    }).find('a').animate({ 
     color: '#000' 
    }); 
});

你可以在這裏找到工作的jsfiddle：http://jsfiddle.net/GdSUg/28/

來源

2013-05-21 20:06:56

菜單在鼠標懸停時淡入淡出

回答

相關問題