在活动bg上添加淡入淡出效果
我有一个菜单结构：
我每个.active类添加背景图像：
#nav li.active a{cursor:default; background:url(images/nav-li-a_hover.png) no-repeat bottom center; padding-bottom:5px;}
它的工作原理。 但是当我点击菜单项时，我想要获得具有淡入淡出效果的背景图像。 我怎么能通过jQuery或CSS3做到这一点？
首先不要在不同的对象上使用相同的id ， id必须是uniqiue，而是使用class 。 还有一件事; 不要忘记关闭html元素，你的li没有关闭。
更新：如果你只想bg到fadeIn而不是你应该分开元素。 在a创建一个元素，然后像这样操作它：
$('ul#nav li').click(function() { $(this).closest('s').hide().addClass('.active').fadeIn(500); });
真正的HTML：
CSS：
#nav li.active s {background:url(images/nav-li-a_hover.png) no-repeat bottom center;}
如果我理解正确你可以做这样的事情：
$('.menu_item').click(function() { $(this).fadeIn('slow', function() { //completed animation }); });
但是，如果您正在调用新页面，则无法按照您的意愿工作，因为内容将被刷新。
解决此问题的一种方法是使用ajax请求，该请求成功时将更新页面的一部分，导航部分不会受到影响：
$.ajax({ type: "GET", url: url, data: {"data":data }, success: function(response){ //success code $("#content").html(response) }, error: function(response){ //error code } });
或者，您可以在加载新页面时执行淡入淡出：
$(document).ready(function(){ //actions })
你需要找出按下了哪个按钮并对其进行了淡入淡出。 这取决于您使用的技术和品味，但一种方法是使用所选菜单项在页面上放置var。