Chuyển đổi jQuery khi di chuột qua - ngăn hàng đợi

Question

Tôi có mã sau đây chuyển đổi chế độ hiển thị của div khi div khác được kết nối. Nó hoạt động tốt, trừ khi bạn rê chuột qua và ra lặp đi lặp lại nó trì hoãn tất cả các Toggles:

$(document).ready(function() { 
    $('.trigger').mouseover(function(){ 
     $('.info').toggle(400); 
    }).mouseout(function(){ 
     $('.info').toggle(400); 
    }); 
}); 

tôi đã cố gắng này, nhưng nó dường như không làm việc (nó tạo ra vấn đề với khả năng hiển thị của toggled div và kết thúc không hiển thị gì cả)

$(document).ready(function() { 
    $('.trigger').mouseover(function(){ 
     $('.info').stop().toggle(400); 
    }).mouseout(function(){ 
     $('.info').stop().toggle(400); 
    }); 
}); 

Làm cách nào để thoát khỏi hàng đợi ở đây?

Answer 1

Sử dụng chức năng .dequeue() và .stop()

.dequeue().stop() 

Tuyệt vời bài viết về vấn đề này tìm thấy ở đây, im chắc chắn nó sẽ cho bạn biết những gì bạn muốn biết.

http://css-tricks.com/examples/jQueryStop/

Ngoài ra tôi sẽ sử dụng. show() and .hide() thay vì .toggle() chỉ để lưu jquery bất kỳ sự nhầm lẫn.

Edit: Cập nhật

Vấn đề là các hình ảnh động isnt hoàn thiện, sử dụng đúng, đúng nó nhảy đến cùng trước khi bắt đầu.

Example

$('.trigger').mouseover(function() { 
    $('.info').stop(true, true).show(400); 
}).mouseout(function() { 
    $('.info').stop(true, true).hide(400); 
}); 

Answer 2

Bạn nên cố gắng này

$(".trigger").hover(function() { $(".info").stop(true).toggle(400); });