Làm thế nào để mờ dần trong một div trên di chuột/di chuột qua sử dụng jquery?

Question

Tôi có một div được đặt thành display:hidden. Tôi muốn div này được đặt thành display:block khi một yếu tố nhất định (#navbar li a) được di chuột qua. Đây là javascript của tôi.

$('document').ready(function(){ 
    $("#navbar li a").onmouseover(function{ 
     $("#navbar ul").css("display","block"); 
    }); 
}); 

Tôi biết rằng $("#navbar li a") đang nhắm mục tiêu yếu tố thích hợp, như tôi đã thử nghiệm điều này. Có điều gì sai với mã javascript của tôi không?

chỉnh sửa: đây là menu thả xuống. #navbar ul là danh sách lồng nhau.

Answer 1

Không có "onmouseover"

Các syntaxsis đúng là:

$("#navbar li a").on("mouseover", function(){ 
    $("#navbar ul").show() //Can use just show here 
}) 

Answer 2

Vâng, có cái gì đó sai với mã của bạn, jQuery không có một sự kiện onmouseover, và những gì bạn đang lẽ tìm kiếm là sự kiện mouseenter, như mouseover cháy liên tục trên MouseMove:

$(document).ready(function(){ 
    $("#navbar li a").on('mouseenter', function(){ 
     $("#navbar ul").show(); 
    }); 
}); 

Mặt khác, bạn có thể có thể làm điều này chỉ với CSS?

Answer 3

Sử dụng .hover

$('document').ready(function(){ 
    $("#navbar li a").hover(function(){ 
     $("#navbar ul").css("display","block"); 
    }); 
}); 

Nếu bạn muốn có một phai có hiệu lực sau đó chỉ cần sử dụng .fadeIn

DEMO

$(function() { 
$('#div1').hover(function() { 
    $('#div2').fadeIn(); 
}, function() { 
    $('#div2').fadeOut(); 
}); 
}); 

Đối với đầy đủ đây là một CSS chỉ phương pháp:

(FYI điều này bằng cách sử dụng phương pháp này sẽ không mốt e nó theo tiếng nói, chỉ cần làm cho nó xuất hiện trên di chuột và sau đó biến mất khi không trên di chuột.)

DEMO

#div2 { 
    width: 200px; 
    height: 200px; 
    background: red; 
    display: none; 
} 

#div1:hover ~ #div2 { 
    display: block;  
} 

Answer 4

tất cả các câu trả lời là show/hide. mã của bạn quá. Câu hỏi là về phai trong.

sử dụng .fadeIn() .fadeOut thay vì hiển thị ẩn

http://api.jquery.com/fadeIn/

Answer 5

Nếu bạn muốn div để thực sự phai nhạt từ đục đến 100% thì bạn đã bắt đầu với đục tại nói 80% (hiển thị là 0,8) rồi giảm xuống 100% (hiển thị là 1,0). Vì bạn muốn bắt đầu với mức độ mờ nên div cần được ẩn bằng cách sử dụng "không hiển thị", mức mờ có thể được đặt mà không có hiệu ứng được nhìn thấy, sau đó làm cho nó hiển thị và mờ dần đến 100%:

$("div.mydivclass").on("mouseenter", function() { 
    $(this).css("display", "none"); 
    $(this).fadeTo("fast", 0.8); 
    $(this).css("display", ""); 
    $(this).fadeTo("10", 1.0); 
});