添加主動BG

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淡入，你應該分開元素。內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;} 

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 
}) 

你需要找出哪個按鈕被按下，並執行淡入到它。這取決於您使用的技術和品味，但一種方法是使用所選菜單項在頁面上放置一個變量。