Jquery 마우스 오버 페이드 인/아웃 (모범 사례)

Question

질문 아래 div에 설명 텍스트를 페이드 인/아웃하려면 Jquery 코드가 작동하고 있습니다. 문제가 있습니까? 해결책은 그다지 우아하지 않습니다. 여기에 내가 가지고있는 것이있다 :

$("#home").mouseover(function() { 
    $("#homeText").fadeIn("slow"); 
}); 
$("#homeText").mouseout(function() { 
    $("#homeText").fadeOut(); 
}); 

내가 더 좋은 방법이 있다는 것을 알고있다. 나는 그것이 무엇인지 모른다.

Answer 1

당신이 첫 번째 함수는 "위로 마우스"와 두 번째는

"을 가져가"문서가 다음 위치에서 역할을에 역할을 맴 돕니을 사용할 수 http://docs.jquery.com/Events/hover

$("#home").hover(function(){ 
    $("#homeText").fadeIn("slow"); 
}, 
function(){ 
    $("#homeText").fadeOut(); 
}); 

Answer 2

존 , 훌륭한 충고! 좀 더 완벽한 솔루션을 찾기 위해 나는 스타팅 포인트로 사용했다. 기본 호버로이 작업을 수행하면 여전히 단일 메뉴 항목에 대한 호버 호출이 생깁니다. 많은 중복 코드가 있습니다. 그래서 당신이 제안한 것을 사용하여 다음을 생각해 냈습니다 :

$('.topMenu').hover(function() 
     { 
     $('#_'+this.id).fadeIn("slow"); 
     }, 
     function() 
      { 
     $('#_'+this.id).fadeOut();  
      }); 
}); 

모든 메뉴 항목에는 topMenu 클래스와 ID가 있습니다. 표시 할 해당 div는 메뉴 항목과 동일한 ID이며 앞에 접두사가 _ 예 : ....

Stuff about our!

...

감사!

Answer 3

3 줄은 어떨까요?

<script> 

    $(function() { 

     $('#home').hover(function() { 
      $('#homeText').fadeToggle("slow"); 
     }); 

    }); 


    </script> 

충분히 우아한가요?

Answer 4

$(function() { 
    $('#home').hover(function() { 
     $('#homeText').fadeIn("slow"); 
    }); 
    $('#home').mouseout(function() { 
     $('#homeText').fadeOut("slow"); 
    }); 
});