vấn đề jquery opacity với fadeIn và fadeOut

Question

http://dl.dropbox.com/u/921159/desktopography/index.html

Tôi đang xây dựng một blog giấy dán tường và cố gắng sử dụng jquery để hiển thị/ẩn một liên kết tải về (Tôi là một newbie). Vấn đề là, nếu bạn di chuột qua hình ảnh và để cho liên kết mờ dần, sau đó nhanh chóng di chuyển ra và bật lại trong khi nó mờ dần ... liên kết sẽ dừng lại ở mức độ mờ đục hiện tại. Nó kết thúc là một vấn đề khi một người dùng tình cờ di chuyển qua các hình ảnh và độ mờ đục bị mắc kẹt tại 0. Whats gây ra điều này?

Answer 1

clearQueue trong hoạt hình .stop() phương pháp mặc định là false (see API) nhưng bạn muốn nó được true bởi vì bạn muốn hình ảnh động hiện tại để rõ ràng và có nó bắt đầu hoạt hình trạng thái di chuột mới. Thay đổi mã của bạn như sau:

$(function() { 
    $('.wallpaper').hover(function() { 
     $(this).children('p').stop(true, true).fadeIn(300); 
    }, function() { 
     $(this).children('p').stop(true, true).fadeOut(400); 
    }); 
}); 

Answer 2

Hãy xem phương thức .stop(). Nó được thiết kế để khắc phục những vấn đề này.

Answer 3

Đây là kết quả của việc bạn đang sử dụng stop()^(docs) để tạm dừng hoạt ảnh và đảo ngược. Rắc rối là chức năng phai tiếp theo ghi nhớ điểm dừng và sử dụng điểm đó.

Bạn có thể sử dụng fadeTo()^(docs) thay vào đó để bạn có thể sửa các mục tiêu độ mờ tại 1 và 0.

$('.wallpaper').hover(function() { 
    $(this).children('p').stop().fadeTo(300, 1); 
}, function() { 
    $(this).children('p').stop().fadeTo(400 ,0); 
}); 

---

EDIT: Tương đương sử dụng animate()^(docs) là:

$('.wallpaper').hover(function() { 
    $(this).children('p').stop().animate({opacity:1}, 300); 
}, function() { 
    $(this).children('p').stop().animate({opacity:0}, 400); 
}); 

Lưu ý rằng không ai trong số này sẽ thiết lập display:none ở cuối. Nếu bạn muốn điều đó, bạn sẽ cần phải làm điều đó bằng tay.

$('.wallpaper').hover(function() { 
    $(this).children('p').show().stop().fadeTo(300, 1); 
}, function() { 
    $(this).children('p').stop().fadeTo(400 ,0, function(){$(this).hide()}); 
}) 
    .children('p').css('opacity',0);