在活动背景上添加淡入淡出效果答案

【问题标题】：Add fade effect on active bg在活动背景上添加淡入淡出效果
【发布时间】：2013-01-31 20:54:24
【问题描述】：

我有一个菜单结构：

<ul id="nav">
    <li id="button1" class="active"><a href="#page-1" title="creative">creativ</a><
   <li id="button1"><a href="#page-1" title="creative">creativ</a></ul>

我每.active类添加背景图片：

#nav li.active a{cursor:default;
                 background:url(images/nav-li-a_hover.png) no-repeat bottom center;
                 padding-bottom:5px;}

它正在工作。但是我想当我单击一个菜单项时，获得具有淡入淡出效果的背景图像。我如何通过 jQuery 或 CSS3 做到这一点？

【问题讨论】：

标签： jquery css fade

【解决方案1】：

首先不要在不同的对象上使用相同的id，id必须是唯一的，而是使用class。还有一件事情;不要忘记关闭html元素，你的lis没有关闭。

更新：如果您只想使用 bg 来淡入，那么您应该分离元素。在a 内创建一个元素s，然后像这样操作它：

$('ul#nav li').click(function() {
    $(this).closest('s').hide().addClass('.active').fadeIn(500);
});

真正的html：

<ul id="nav">
   <li class="button1 active"><a href="#page-1" title="creative">creativ<s></s></a></li>
   <li class="button1"><a href="#page-1" title="creative">creativ<s></s></a></li>
</ul>

css:

#nav li.active s {background:url(images/nav-li-a_hover.png) no-repeat bottom center;}

【讨论】：

谢谢 Barlas，它正在工作，但是当我将您的代码放入我的站点并单击一个项目时，通过淡入淡出效果获取菜单项和活动背景。我只想通过淡入淡出背景图像。

【解决方案2】：

如果我理解正确，你可以这样做：

$('.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 并选择菜单项。

【讨论】：