Làm thế nào để dừng tất cả các hình động trước đó trong Jquery trước khi thực hiện một hình ảnh mới?

Question

Tôi chỉ đang thử nghiệm điều gì đó với JQuery.

Tôi có một hình ảnh mà mất dần vào hình ảnh khác như mouseOver() xảy ra và mất dần trở lại trên mouseOut()

Nó hoạt động tuyệt vời, trừ khi bạn đang di chuyển chuột qua liên kết một lần nữa và một lần nữa, nói 5 lần, mờ đi hình ảnh trong và ngoài liên tục, 5 lần trong khi bạn chỉ ngồi đó và chờ cho nó để có được hơn với hành vi điên rồ này.

Để ngăn chặn hành vi này, tôi đã cố gắng sử dụng cờ và bắt đầu hoạt ảnh CHỈ nếu nó không hoạt ảnh, nhưng, hãy đoán xem? Nếu, nói, tôi có 4 nút như vậy, và trên mỗi nút di chuột qua tôi đang mờ dần Trong một hình ảnh khác, hoạt ảnh đó sẽ bị bỏ qua vì cờ là sai.

vậy Có cách nào để dừng tất cả các hoạt ảnh trước đó trước khi thực hiện các ảnh động mới không? tôi đang nói về bình thường fadeIn() và slideDown() chức năng trong JQuery

---

EDIT: Thêm mã từ liên kết.

<a href="javascript:void(0);" onMouseOver="mouseOverOut(false);" onMouseOut="mouseOverOut(true);">Tick</a> 

javascript

function mouseOverOut(t) 
{ 
    if(t) 
    { 
     $('.img1').fadeIn(); 
     $('.img2').fadeOut(); 
    } 
    else 
    { 
     $('.img1').fadeOut(); 
     $('.img2').fadeIn(); 
    } 
} 

Answer 1

Sử dụng .stop() với fadeIn/Out có thể gây ra opacity để gặp khó khăn trong tình trạng một phần.

Một giải pháp là sử dụng .fadeTo() thay thế, cung cấp điểm đến tuyệt đối cho độ mờ.

function mouseOverOut(t) { 
    if(t) { 
     $('.img1').stop().fadeTo(400, 1); 
     $('.img2').stop().fadeTo(400, 0); 
    } 
    else { 
     $('.img1').stop().fadeTo(400, 0); 
     $('.img2').stop().fadeTo(400, 1); 
    } 
} 

Đây là cách viết ngắn hơn.

function mouseOverOut(t) { 
    $('.img1').stop().fadeTo(400, t ? 1 : 0); 
    $('.img2').stop().fadeTo(400, t ? 0 : 1); 
} 

Hoặc điều này có thể hiệu quả. Kiểm tra nó đầu tiên, mặc dù.

function mouseOverOut(t) { 
    $('.img1').stop().fadeTo(400, t); 
    $('.img2').stop().fadeTo(400, !t); 
} 

CHỈNH SỬA: Cái cuối cùng này có vẻ hoạt động. Đúng/sai được dịch sang 1/0. Bạn cũng có thể sử dụng trực tiếp .animate().

function mouseOverOut(t) { 
    $('.img1').stop().animate({opacity: t}); 
    $('.img2').stop().animate({opacity: !t}); 
} 

Answer 2

Bạn đã thử stop()?

Mô tả: Dừng hoạt ảnh hiện đang chạy trên các phần tử phù hợp.

Answer 3

sử dụng .stop()