Элемент списка jquery с прозрачностью при наведении.

Question

Я пытаюсь создать простое меню с изображениями, где у выбранного есть opacity:1, а у другого li есть opacity:0.4.

Не могли бы вы сказать мне, что я делаю неправильно, пожалуйста?

например здесь: http://jsfiddle.net/mdamC/161/

Answer 1

У вас есть синтаксическая ошибка, снимите последнюю });.Я не знаю, каково ваше намерение, но это по крайней мере заставит его разобратьсяВот скрипка .

Answer 2

У вас есть некоторые синтаксические ошибки, которые являются вероятным виновником.В функции готовности документа используйте следующее:

$("li").css('opacity','0.40');
$(".selected").css('opacity','1');

$('ul.showcase').on("mouseover", "li", function() {
    $(this).stop().fadeTo(500, 1);
});

$('ul.showcase').on("mouseout", "li:not(.selected)", function() {
    $(this).stop().fadeTo(500, 0.4);
});

Обратите внимание, что для этого требуется jQuery 1.7+ с использованием .on() API.Я настоятельно рекомендую это сделать, поскольку использование делегированных событий гораздо более эффективно.

Answer 3

Если вы хотите исчезнуть все, кроме выбранной ссылки, попробуйте это:

$('ul.showcase').hover(function() {
    $(this).find('li').stop().fadeTo(500, 1);
}, function() {
    $(this).find('li:not(".selected")').stop().fadeTo(500, 0.4);
});

http://jsfiddle.net/mblase75/mdamC/171/

Answer 4

Вам нужно обернуть свой код в функцию готовности документа, например:

$(document).ready(function(){
    ....code here....
});

или упрощенную версию:

$(function(){
    .....code here....
});

Кроме того, вам нужно несколько точек с запятой, чтобы закрыть первыйдва оператора непрозрачности:

$("li").css('opacity','0.40');
$(".selected").css('opacity','1');

Обновление здесь: http://jsfiddle.net/mdamC/163/