JQuery выбрать один элемент для fadeIn

Изучение jquery.JQuery выбрать один элемент для fadeIn

В настоящее время у меня есть этот кусок кода:

$(document).ready(function() { 

    $('.portfolio img').mouseover(function() { 
     console.log('hover succes'); 
     $('.thumbnail-overlay').fadeIn(); 
    }).mouseout(function() { 
     $('.thumbnail-overlay').fadeOut(); 
    }) 

});

явно не идеал, так как у меня есть .portfolio раздел с изображениями, но эффект применяется ко всем изображениям сразу. Как получить только текущий элемент, выбранный для эффекта?

источник

2013-08-26 Stephan-v

Какова связь между '.thumbnail-overlay' и' .portfolio img'? –

Вам нужно посмотреть ваш html для получения точного ответа. Но в основном, используйте '$ (this)' в вашем обработчике, чтобы получить ссылку на цель события, затем пересечь DOM с помощью функций [traversal] (http://api.jquery.com/category/traversing/) для который вы хотите активировать. Альтернативно, если перемещение не является вариантом, вы можете дать два набора связанных классов. –

. Thumbnail-overlay помещается над img как черный прозрачный блок. –

Чтобы быть в состоянии сделать это убедиться, что единственный IMG элемента и .thumbnail-накладки оба имеют общий родительский элемент.

Как это (где родитель .portfolio):

<div class="portfolio"> 
    <div class="thumbnail-overlay"></div> 
    <img> 
</div>

Теперь вы можете получить доступ к .thumbnail-накладку с помощью $(this).closest('.portfolio').find('.thumbnail-overlay')

ИЛИ убедитесь, что IMG элемент ребенок . эскиз-наложение.

Как это:

<div class="portfolio"> 
    <div class="thumbnail-overlay"> 
     <img> 
    </div> 
</div>

Или это:

<div class="thumbnail-overlay"> 
    <div class="portfolio"> 
     <img> 
    </div> 
</div>

А затем получить .thumbnail-накладку с помощью $(this).closest('.thumbnail-overlay').

источник

2013-08-26 22:42:11

ответ

Смежные вопросы