Jquery에서 여러 이미지 요소가 모두 표시되면 사라집니다.

Question

동일한 ID를 가진 페이지의 요소 하나에 페이드를 적용하는 데 문제가 있습니다.

먼저 이미지를 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가 가능하지만 호환되도록하려는 경우이 작업을 수행 할 수 있음을 알고 있습니다.

당신은 다시 같은 요소를 보내고 find()이다, 너희들은 도움이 될 수 있습니다

건배,

톰

Answer 1

를 바랍니다. 당신이 당신 호버 처리기이 사용할 수 있도록 $(this)는 공중 선회 요소이다 : 그러나

$('.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) .find ('. mainArticle img, .articleContainer') 대신 $ (this)을 사용하는 것이 어떻습니까?

선택기와 일치하는 모든 요소를 ​​선택하고 있지만 이미 마우스를 가져 왔기 때문에 $ (this)를 사용하여 변경을 수행 할 수 있습니다.