Как предотвратить одновременное воздействие функции jQuery .hover на все изображения?

Я не уверен, что название объясняет это достаточно хорошо, но я старался сделать его довольно коротким!

Итак, у меня есть несколько изображений, разбросанных по странице, и я создал для них галерею лайтбоксов (.cboxElement — это класс, который ее вызывает). Что я хотел добавить, так это эффект наведения на каждое изображение, затронутое лайтбоксом, чтобы пользователь знал, что его можно масштабировать.

Проблема:

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

    $("a.cboxElement").each(function(){
        $(this).prepend("<span class='zoom'></span>");
    });

Сразу после этого я использовал эффект наведения:

    $("a.cboxElement").hover(function(){
        $("a.cboxElement span").fadeIn('fast');
    },
    function(){
        $("a.cboxElement span").fadeOut('fast');
    });

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

У кого-нибудь есть идеи, что я могу сделать?

Большое спасибо,

Джон


jquery jquery-hover
person Jon    schedule 26.08.2011    source источник
comment
немного новичок в этом, поэтому надеюсь, что помещу это в нужное место! просто хотел добавить что-то еще, что я заметил для тех, кто находит этот поток полезным, добавляя .stop(true,true) после .find, он немедленно останавливает текущую анимацию и запускает следующую - полезно, если кто-то наводит курсор на включение/выключение до предыдущего эффекта завершено, иначе анимация не будет синхронизирована с действиями пользователя. нашел информацию здесь - stackoverflow.com/questions/5722758/   -  person Jon    schedule 26.08.2011

Ответы (3)


arrow_upward
3
arrow_downward

Я думаю, вам просто нужно изменить область действия при наведении курсора:

$("a.cboxElement").hover(function(){
    $(this).find("span").fadeIn('fast');
},
function(){
    $(this).find("span").fadeOut('fast');
});

Ваш исходный код говорил: для каждого a.cboxElement найдите все a.cboxElement элементов span и затухайте их. Вышеприведенный код говорит, что для каждого a.cboxElement при наведении найдите span только для этого a.cboxElement и затемните его.

person Cᴏʀʏ    schedule 26.08.2011
comment
Ура Кори, работает отлично! И спасибо за объяснение того, что на самом деле говорил мой исходный код, очень полезно - person Jon; 26.08.2011
comment
@Jon, пожалуйста, и добро пожаловать в SO. Для ответов, которые вы считаете полезными и точными, не забудьте нажать на галочку рядом с ним, чтобы пометить их как принятый ответ. - person Cᴏʀʏ; 26.08.2011
comment
@CoryAll готово - я еще не позволил бы мне проголосовать, недостаточно представителей! - person Jon; 26.08.2011

arrow_upward
1
arrow_downward

Кроме того, вы можете использовать .fadeToggle с одной функцией:

$("a.cboxElement").hover(function(){
    $(this).find("span").fadeToggle("fast");
});
person karim79    schedule 26.08.2011
comment
Как только я увидел это, я подумал, да, это то, что я должен был сделать, но по какой-то причине это не работает... Я поиграю с этим и посмотрю, что у меня получится, но идея приветствуется. - person Jon; 26.08.2011

arrow_upward
0
arrow_downward

Назначьте каждому изображению атрибут id="..." и выберите его вместо всего класса a.cboxElement:

<img id="imageid1" ... >
$('#imageid1')....
person Blazemonger    schedule 26.08.2011