Несколько элементов изображения исчезают при наведении курсора в Jquery.

Question

У меня проблема с применением фейдера только к одному элементу на странице с таким же идентификатором.

Сначала я уменьшаю изображение до 60%, а затем при наведении курсора изображения хочу, чтобы оно было только на 100%. Эта часть работает, но она применяет эффект к каждому элементу на странице.

// Fading images
$(document).ready(function(){

$('.mainArticle img').fadeTo('slow', 0.6);

$('.mainArticle img, .articleContainer').hover(function(){

    $(this).find('.mainArticle img, .articleContainer').stop(true,true).fadeTo("slow", 1.0);
},function(){
    $(this).find('.mainArticle img, .articleContainer').stop(true,true).fadeTo("slow", 0.6); 
}); 
});

Также я знаю, что это можно сделать, если CSS, но пытается быть максимально совместимым.

Надеюсь, вы, ребята, можете помочь,

Приветствия

Tom

Answer 1

Вы find() снова используете те же элементы. $(this) - элемент hovered, так что вы можете просто использовать его для вашего обработчика наведения:

$('.mainArticle img, .articleContainer').hover(function(){
  $(this).stop(true,true).fadeTo("slow", 1.0);
},function(){
  $(this).stop(true,true).fadeTo("slow", 0.6); 
});

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

$(function(){
  $('.mainArticle img').fadeTo('slow', 0.6);

  $('.articleContainer').hover(function(){
    $(this).find('.mainArticle img').stop(true,true).fadeTo("slow", 1.0);
  },function(){
    $(this).find('.mainArticle img').stop(true,true).fadeTo("slow", 0.6); 
  });
});

---

Только одно изображение должно исчезнуть: jsFiddle

С исчезновением нескольких изображений: jsFiddle

Answer 2

Как насчет использования $ (this) вместо $ (this) .find ('. MainArticle img, .articleContainer')?

Вы выбираете каждый элемент, соответствующий этому селектору, но так как выВы уже зависли, вы можете просто использовать $ (this) и выполнить изменение там.