Question

我有一个菜单结构：

<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做到这一点？

Answer 1

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

更新：如果你只想bg到fadeIn而不是你应该分开元素。在s中创建一个元素a，而不是像这样操纵它：

$('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;}

Answer 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。

在活动bg上添加淡入淡出效果

2 个答案: