Add fade effect on active bg

问题

I have a menu structure:

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

And i add background image every .active class:

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

It's working. But i want when i click a menu item, get background-image with fade effect. How can i do this via jQuery or CSS3?

回答1:

First of all don't use the same id on different objects, id's must be uniqiue, use class instead. And one more thing; don't forgot to close html elements, there are no closing on your lis.

Update: If you want to only bg to fadeIn than you should seperate the elements. Create an element s inside a and than manipulate it like this:

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

True 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;}

回答2:

If i understood correctly you can do something like this:

$('.menu_item').click(function() {
  $(this).fadeIn('slow', function() {
    //completed animation 
  });
});

But, if you are calling a new page this won't work as you desire because the content will be refreshed.

One way to work around this is to use an ajax request which, on success, will update a section of your page, and the navigation section won't be affected:

$.ajax({
    type: "GET",
    url: url,
    data: {"data":data },
    success: function(response){
        //success code
        $("#content").html(response)
    },
    error: function(response){
        //error code
    }
});

Or you can do the fade when the new page is loaded:

$(document).ready(function(){
   //actions
})

You will need to find out which button was pressed and do the fadeIn to it. That depends on the technology you are using, and on taste, but one way to do it is to place a var on the page with the selected menu item.

来源：https://stackoverflow.com/questions/14625651/add-fade-effect-on-active-bg

标签

jquery

css3

fade