마우스 오버에 jQuery 페이드 인/아웃?

Question

다음 구조에 링크가 있으며 jQuery/CSS가 숨기는 것이 무엇인지 알고 싶습니다. <img /> 태그와 마우스 오버에 사라집니다.

여기서 아이디어는 HTML입니다u003Cimg> 부드러운 효과를 제공하기 위해 마우스 오버에 숨겨져 있고 사라집니다.

한편 CSS 배경은 처음에 보여줍니다.

HTML :

u003Cdiv id="nav">

u003Ca href="blah" id="id1">

u003Cimg src="hoverimg.png" alt="링크 텍스트 1"n />u003Cspan>링크 텍스트 1u003C/span>

u003Cimg src="hoverimg2.png" alt="링크 텍스트 2"n />u003Cspan>링크 텍스트 2u003C/span>

u003C/div>

CSS :

#nav a span{
  display: none; /* Hide the text reader title */
}

#nav a {
  display: block;
  height: 200px;
  width: 250px;
  background url("bgimage.png"); /* I would ideally use the # selector for individual links.. */
}

#nav a img{
  /* what goes here so that jQuery works and so that we can backwards compatibility a:hover effect? */
}

jQuery :

???

참고로, 대상 요소가 몇 레벨의 깊이로 중첩 된 하위 노드 인 경우 jQuery가 애니메이션을 여러 번 실행한다는 것을 알았습니다. 이것을 막을 방법이 있습니까?

Answer 1

그냥 추가하십시오 style="display: none;" 이미지 html에 att를 다음 다음을 사용하십시오.

       $("#nav").hover(
            function() {
                $("img", this).show();
            },
            function() {
                $("img", this).hide();
            });

(쇼/숨기기가 필요하지 않은 경우 필요에 대한 효과를 수정하십시오)