갤러리 상자를 가리 키도록 페이드 인/아웃

Question

안녕하세요, 간단한 것을 묻어서 죄송합니다. 나는 jQuery 멍청한 녀석이고 심지어는 힘들어서이 간단한 효과를 내기 위해 많은 노력을 기울였다.

부모가 마우스를 가져 가면 아이가 희미 해지고 마우스를 사용하면 사라집니다.

다른 문제는 모든 div가 동일한 클래스를 가지고 있고 내가 가리키면 아이들을 표시/숨기면 다른 div에도 효과가 적용되며 이는 정말 나쁜 것입니다 ... jquery를 만드는 방법이 필요합니다. 모든 요소가 똑같은 클래스를 가지고 있어도 힘들다고해도 요소가 홀드된다는 것을 이해하십시오. http://jsfiddle.net/6nBBZ/

여기 내 JQuery와있다 :

$(".container").mouseover(function() { 
$("a").fadeIn("slow"); 
}); 
$(".container").mouseout(function() { 
$("a").fadeOut(); 
}); 

덕분에 나는이 설명하지만 빠른 jsFiddle을 만들어 얼마나 잘

나는 확실하지 않다! http://jsfiddle.net/Aveendra/LyjB9/2/

Answer 1

$(".container").mouseenter(function() { 
    $(this).find('.hover').fadeIn(500); 
}).mouseleave(function() { 
    $(this).find('.hover').fadeOut(500); 
}); 

당신은 당신이 당신의 경우에 당신이 후손을 선택 find()를 사용하려면, 다른 elments를 기준으로 요소를 찾을 필요가 어디 jQuery의 DOM traversal methods는, 이러한 상황의이 종류에 도움이 될 것입니다 연구 할 필요가 의 요소. 또한

대신 mouseover의 당신이 개인적으로 각각 mouseenter 및 mouseleave를 처리하기 위해 두 함수 인수로 hover()를 사용하는 것을 선호, 마우스가 요소를 입력 한 번 할 때 코드 만 실행되도록 호버 이벤트를 처리 할 mouseenter을 사용해야합니다

를 또한 Updated fiddle

$(".container").hover(function() { 
    $(this).find("a").stop().fadeIn("slow"); 
},function(){ 
    $(this).find("a").stop().fadeOut(); 
}); 

당신이 당신의 CSS 규칙을 제거하고 jQuery를이 처리 할 수 ​​있도록 할 필요가 있습니다 요소 표시

Answer 2

Answer 3

우선 나는 문제를 푸는 좋은 방법이라고 생각하지 않습니다. 각 사진마다 다른 div가 있습니다. 고맙게도 당신이하고 싶은 말을했습니다. 그래서 왜 각 사진마다 다른 컨테이너 div를 생성하는지 알 수 있습니다. jquery 작업을 수행하려면.

저는 많은 div를 사용하지 않고했습니다. 그리고 간단한 jquery.

미리보기 :http://jsfiddle.net/techsin/jkhz5/4/embedded/result/이 전체 코드 :::::

$("#main div").each(function(){ 
    var $this = $(this),x=.2; 
    $this.css({opacity:x}); 
    $this.hover(function(){$this.stop().animate({opacity: 1});}, 
       function(){$this.stop().animate({opacity: x});}); 
}); 

코드 다음은

업데이트 :http://jsfiddle.net/techsin/jkhz5/4/업데이트]