fadeTo() затухает ВСЕ изображения вместо зависшего изображения

Я использую эффект jQuery .fadeTo() для избранных изображений в WordPress. Как я настроил код, так это то, что если мышь наводит курсор на изображение, оно исчезает до 0,7, когда мышь уходит, оно снова исчезает до 1:

jQuery(function($) {
$(window).load(function() {
    $('.image').mouseover(function() {
        $('.image').fadeTo('fast', 0.7);
    });
    $('.image').mouseout(function() {
        $('.image').fadeTo('fast', 1); 
    });
});

});

Данным классом является «.image», и я поместил его в div внутри цикла wordpress в коде рекомендуемого изображения, например:

<div class="image"><?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?> <!-- If has featured image, GET --></div>

Проблема, с которой я сталкиваюсь, заключается в том, что каждый раз, когда я наводил курсор на ОДНО изображение, оно исчезало ВСЕ изображения на странице. Чего я действительно хочу, так это чтобы изображение исчезло, над которым зависает моя мышь, что я делаю неправильно?


javascript wordpress html jquery
person adamk22    schedule 26.08.2013    source источник
comment
Вы можете упростить это до: $('.image').hover( function() { $(this).fadeTo('fast', 0.7); }, function() { $(this).fadeTo('fast', 0.1); });.   -  person insertusernamehere    schedule 26.08.2013
comment
Спасибо! все еще изучаю язык jQuery - так что это все новое для меня.   -  person adamk22    schedule 26.08.2013

Ответы (2)


arrow_upward
5
arrow_downward

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

Попробуйте изменить

$('.image').fadeTo('fast', 0.7);

to 

$(this).fadeTo('fast', 0.7);

и то же самое для события mouseout.

Вот небольшой ПРИМЕР.

person Chase    schedule 26.08.2013
comment
Да! Почему я даже не удосужился попробовать это. Спасибо за ответ, отмечу через 10 минут ;) - person adamk22; 26.08.2013
comment
Не беспокойтесь, рад, что это помогло =) У меня определенно были такие моменты раньше! - person Chase; 26.08.2013

arrow_upward
2
arrow_downward

После запуска события наведения курсора мыши на этот элемент вам не нужно снова вызывать селектор jQuery.

Используя $('.image'), вы вызовете все элементы с этим классом и примените к ним затухание. Если вместо этого вы используете this, то вы ссылаетесь только на тот элемент, на который наведен указатель мыши. Вы можете попробовать это вместо этого:

$('.image').mouseover(function() {
    $(this).fadeTo('fast', 0.7);
});
$('.image').mouseout(function() {
    $(this).fadeTo('fast', 1); 
});
person Sergio    schedule 26.08.2013