jQuery fadeTrong lớp CSS

Question

Tôi đang cố gắng làm lớp CSS đơn giản() trên các đối tượng nhất định có lớp "nút". Tôi muốn fadeTrong "hoverbutton" lớp trên di chuột và sau đó fadeOut khi con chuột của họ rời khỏi mục.

Tôi đã tìm thấy điều này trong các câu hỏi. Nó dường như hoạt động tốt cho đến khi tôi nhận thấy khi tôi di chuột qua nhiều nút một cách nhanh chóng một số bị mắc kẹt trên lớp "hoverbutton". Không phải là một đầu mối làm thế nào để sửa chữa điều đó. Bất kỳ đề xuất nào cũng sẽ rất tuyệt.

$('.button').hover(function(){ 
    $(this).addClass('hoverbutton', 200); 
}, function(){ 
    $(this).removeClass('hoverbutton', 200); 
}); 

có vẻ như họ gặp khó khăn khi tôi di chuột qua một và nhanh chóng nhảy đến mục khác với lớp đó trước sự mờ dần trên người đầu tiên hoàn tất.

stop() ing tạo ra cùng một kết quả. lớp di chuột vẫn bị mắc kẹt

$('.button').hover(function(){ 
    $(this).stop().addClass('hoverbutton', 200); 
}, function(){ 
    $(this).stop().removeClass('hoverbutton', 200); 
}); 

Answer 1

Vấn đề là vì jQueryUI đang sử dụng style tài sản để làm các hình ảnh động, và nếu nó không đầy đủ (vì di chuột-out xảy ra trước khi hover-in kết thúc) lớp nó hoạt hình không thực sự được thêm vào và do đó không thể xóa được bằng cách di chuột ra ngoài.

Để khắc phục điều này, chúng ta cần phải làm hai việc trên hover-out:

• ngăn chặn addClass() hoạt hình
• loại bỏ bất kỳ phong cách tạm thời được tạo ra bởi addClass() hoạt hình

Giống như rất ..

$('.button').hover(function() { 
    $(this) 
     .addClass('hoverbutton', 200); 
}, function() { 
    $(this).stop() 
     .attr("style", "") 
     .removeClass('hoverbutton', 200); 
}); 

Dưới đây là ví dụ: http://jsfiddle.net/RBTT8/

Answer 2

Cố gắng ngăn chặn hàng đợi hoạt hình:

$('.button').hover(function(){ 
    $(this).stop().addClass('hoverbutton', 200); 
}, function(){ 
    $(this).stop().removeClass('hoverbutton', 200); 
}); 

Answer 3

Kiểm tra các tài liệu cho stop(). Bạn sẽ thêm nó vào cuộc gọi của bạn như sau:

$('.button').hover(function(){ 
    $(this).stop().addClass('hoverbutton', 200); 
}, function(){ 
    $(this).stop().removeClass('hoverbutton', 200); 
}); 

Answer 4

Một phương pháp khác để đạt được hiệu quả tương tự sẽ được sử dụng CSS3 Transitions, hỗ trợ trong tất cả mọi thứ trừ Internet Explorer (lên đến phiên bản 10).

Dưới đây là một ví dụ: http://jsfiddle.net/3yr8G/

Answer 5

Hãy thử sử dụng CSS add -

ex)--styles take 0.5s to appear  transition: all 0.5s ease-in-out; 

tới phần tử u cần phải mờ dần trong

w3schools liên kết chuyển tiếp: http://www.w3schools.com/css/css3_transitions.asp