При наведении кнопки навигации соответствующие изображения будут меняться местами.

Я с трудом оборачиваю голову вокруг этого.

концепция навигации

Наведение курсора на кнопку панели навигации изменит изображение для соответствующего «прожектора», расположенного непосредственно под ним.

Я пробовал много разных подходов, и, поскольку я все еще далек от запоминания всего набора функций jQuery, я просто не могу понять этот.

На данный момент это лучший вариант, но он требует, чтобы я назначал идентификатор каждому элементу, и я не смог понять, как добиться хорошего кроссфейда.

$('a#nav2').hover(function() {
    $('#nav2_light').attr("src","../img/nav/light_bright.png");
}, function() {
    $('#nav2_light').attr("src","../img/nav/light.png");
});

Я пытаюсь найти: 1. Более эффективный метод выполнения этого для каждой навигационной кнопки и соответствующего прожектора 2. Способ плавного затухания изображений. fadeOut и fadeIn полностью затухают изображение, прежде чем появится следующее, а это не то, что мне нужно.

Я понимаю, что вопросы, подобные этому, задавались, но все те, которые я нашел, были экземплярами только с одним изображением. Я хотел бы сделать функцию повторяемой для каждого пункта меню. Идеи? Заранее спасибо за вашу помощь!

Изменить. Чтобы уточнить, навигационные кнопки и прожекторы — это отдельные объекты. Я не уверен, что $this сработает в этом случае. На иллюстрации у меня все навигационные кнопки находятся в одном div, а прожекторы — в другом.

Редактировать 2: я немного поиграл с этим, и я полагаю, что это сработает, если я просто назначу идентификатор для каждого. Тем не менее, я все еще ищу способ заставить своп делать перекрестное затухание. Кто-нибудь знает, как это сделать, если я использую функцию .attr?


navigation image jquery swap
person DesignUtensil    schedule 07.11.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

$('.class_name').hover(function() {     
$(this).attr("src","../img/nav/light_bright.png");         
}, function() {  
   $(this).attr("src","../img/nav/light.png"); 
});
person run    schedule 07.11.2011
comment
Спасибо за ваш ответ, но он почти такой же, как у меня сейчас. Если я нацелюсь, используя класс подметания, он изменит все источники света одновременно, не так ли? Мне нужно по одному. Я также пытаюсь найти способ заставить его исчезнуть во втором изображении. - person DesignUtensil; 07.11.2011