jQuery: как я могу контролировать прозрачность div при наведении курсора на другой div?

Question

В настоящее время я работаю над своим веб-сайтом портфолио, в котором используется очень простая навигация. Однако то, что я хочу сделать, это сделать, чтобы тень под типом стала сильнее (читай: более высокая непрозрачность / темнее) при наведении на тип.

Сейчас мой код выглядит следующим образом и не выдает никаких ошибок, но просто ничего не делает.

Для хорошего понимания того, что я имею в виду, посмотрите веб-сайт с живым примером .

/* Work | Play | About | Contact */
/* Shadow Opacity */
$(document).ready(function() {
    $('#workShadow', '#playShadow', '#aboutShadow', '#contactShadow').fadeTo( 0, 0.1);
});

/* Shadow Hover effect */
$(document).ready(function() {
    $('a#work').hover(function() {
        $('#workShadow').fadeTo( 200, 0.5);
    }, function() {
        $('#workShadow').fadeTo( 400, 0.1);
    });
});

/* Type movement on hovering */
$(document).ready(function() {  
    $('a.shift').hover(function() { //mouse in  
        $(this).animate({ paddingTop: 85, paddingBottom: 2 }, 200);  
    }, function() { //mouse out  
        $(this).stop().animate({ paddingTop: 75, paddingBottom: 12 }, 400);  
    });  
});

Обычно мне нужно, чтобы непрозрачность теневых элементов (4 отдельных) начиналась с непрозрачности 10%, и пока пользователь наводит курсор, тип перемещается вниз (эта часть работает), и одновременно тень становится сильнее, увеличивается до 60% непрозрачности. Затем вернитесь к 10%, когда на mouseOut.

Answer 1

Эта строка неверна - она ​​передает кучу аргументов в функцию $().

$('#workShadow', '#playShadow', '#aboutShadow', '#contactShadow').fadeTo( 0, 0.1);

Как отмечается в документации , jQuery не ожидает N аргументов в качестве селектора, а 1:

$('#workShadow, #playShadow, #aboutShadow, #contactShadow').fadeTo( 0, 0.1);

Это распространенная (и хорошая) практика - предоставлять набор объектов, которые должны выполнять что-то общее, или выбирать их умнее, чем просто перечислять все их идентификаторы. Основываясь на вашем текущем HTML, этот селектор получает все тени <div> s в меню, и он намного короче - вам не придется изменять код, если позже вы добавите новый элемент меню, например:

$('div','#navigationFrame').fadeTo(0, 0.1);

Я также вижу, что у вас есть это:

<li id="work"><a id="work" ...>

Это действительно очень неправильно. Идентификаторы должны быть уникальными в документе. Имея более 1 идентификатора в документе, вы не только нарушаете передовые практики, но и выбор идентификатора в jQuery сходит с ума и не работает должным образом. Как и селектор fadeTo, вы можете изменить код смены теней на более чистый:

$('a','#navigationFrame').hover(function() {
    $(this).next('div').fadeTo(200, 0.5);
}, function() {
    $(this).next('div').fadeTo(400, 0.1);
});

Я протестировал сайт с этими изменениями, и он работает нормально.

Селекторы в моих примерах используют преимущества context jQuery. Делая это:

$('a','#navigationFrame');

или это:

$('div','#navigationFrame');

Мы говорим jQuery "только дайте мне <a> (или <div>) элементы внутри #navigationFrame.

Это эквивалентно этому:

$('#navigationFrame').find('a');

Это хорошая идея, чтобы воспользоваться этим. Я вижу, что у вас есть тенденция вручную перечислять элементы, которые вы пытаетесь сделать, даже если они все в некотором роде похожи. Попробуйте избавиться от этой привычки и дайте мощным селекторам jQuery получить то, что вы хотите из документа.

Answer 2

Я использую это:

$(".thumbs img").addClass('unselected_img');
$('.thumbs img').click(function() {
    $(this).addClass('selected_img');
    if ($(this).is('selected_img')) {
        $(this).removeClass('selected_img');
    } else {
        $('.thumbs img').removeClass('selected_img');
        $(this).addClass('selected_img');
    }
});

// hover the lists

$('.thumbs img').hover(
    function() {
        $(this).addClass('selected_img_h');
    }, 
    function() {
        $(this).removeClass('selected_img_h');
});`

и стиль:

.selected_img
{
    opacity: 1; filter: alpha(opacity = 100);
    border:none;
}

.selected_img_h{
    opacity: 1; filter: alpha(opacity = 100);
    border:none;
}

.unselected_img
{
    opacity: 0.6; filter: alpha(opacity = 60);
    border:none;
}