Добавить эффект затухания на активном фоне

У меня есть структура меню:

<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
person user2018194    schedule 31.01.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Прежде всего, не используйте один и тот же id для разных объектов, id должны быть уникальными, вместо этого используйте class. И еще кое-что; не забудьте закрыть элементы html, на ваших li нет закрытия.

Обновление: если вы хотите, чтобы только bg затухало, вам следует разделить элементы. Создайте элемент 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;}
person Barlas Apaydin    schedule 31.01.2013
comment
Спасибо, Барлас, это работает, но когда я помещаю ваш код на свой сайт и щелкаю элемент, получаю элемент меню и активный фон с помощью эффекта затухания. Я хочу, чтобы только фоновое изображение получалось через затухание. - person user2018194; 31.01.2013

arrow_upward
0
arrow_downward

Если я правильно понял, вы можете сделать что-то вроде этого:

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

Вам нужно будет узнать, какая кнопка была нажата, и сделать для нее затухание. Это зависит от используемой вами технологии и вкуса, но один из способов сделать это — разместить переменную на странице с выбранным пунктом меню.

person Damium    schedule 31.01.2013