Jquery mouse-over fade-in/out (thực hành tốt nhất)

Question

Tôi đã làm việc mã Jquery để mờ dần vào/ra văn bản mô tả trong một div bên dưới câu hỏi. Vấn đề? Giải pháp không phải là rất thanh lịch. Đây là những gì tôi đã có:

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

Tôi biết có cách tốt hơn để làm điều này, tôi không chắc nó là gì.

Answer 1

bạn có thể sử dụng di chuột, chức năng đầu tiên sẽ hành động dựa trên một "di chuột qua" và thứ hai sẽ hành động dựa trên một "di chuột ra ngoài"

Các tài liệu nằm ở đây: http://docs.jquery.com/Events/hover

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

Answer 2

Jon , Lời khuyên tuyệt vời! Tôi đã sử dụng như một điểm nhìn chằm chằm mặc dù cho một giải pháp hoàn chỉnh hơn. Làm điều này chỉ với di chuột cơ bản sẽ vẫn để lại cho tôi với một cuộc gọi di chuột cho mục menu đơn .. Rất nhiều mã dự phòng. Vì vậy, sử dụng những gì bạn đề xuất, tôi đã đưa ra điều này:

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

Tất cả các mục menu đều được cấp lớp và ID hàng đầu. Div tương ứng để hiển thị là id giống với mục menu, chỉ được bắt đầu bằng _ Ví dụ: ....

Nội dung về chúng tôi!

...

Cảm ơn!

Answer 3

Còn khoảng 3 dòng?

<script> 

    $(function() { 

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

    }); 


    </script> 

Đủ thanh lịch?

Answer 4

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