Hoạt ảnh jQuery: Dừng hoạt ảnh khi di chuột ra

Question

Tôi đang cố gắng tạo một div để trượt ra và khi di chuột tức là chuột vào và rời, tương ứng. Tuy nhiên, khi tôi lơ lửng vào và ra nhiều lần, các div giữ trượt qua lại về cơ bản lên đến số lần tôi đã di chuột. Vui lòng tham khảo số jsFiddle example này.

Như bạn có thể đoán, tôi hy vọng sẽ dừng chân div (tức là trượt vào) khi con chuột ở bên ngoài phần tử bất kể số lần tôi đã di chuột qua nó. Tôi nghĩ rằng có một cái gì đó còn thiếu trong sự hiểu biết của tôi về hoạt hình jQuery.

$("#state-slider").hover(function() { 
    $(this).animate({ 
    left: '0' 
    }, 500); 
}, function() { 
    $(this).animate({ left: "-270" }, 500); 
}); 

Cảm ơn bạn.

Answer 1

Bạn cần jQuery .stop() function. Chèn nó vào chuỗi lệnh của bạn trước khi bạn bắt đầu một hoạt ảnh mới, để làm gián đoạn mọi hoạt ảnh đang diễn ra.

$('#state-slider').hover(function() { 
    $(this).stop().animate({ left: 0 }, 500); 
}, function() { 
    $(this).stop().animate({ left: -270 }, 500); 
}); 

Working jsFiddle =)

Answer 2

$("#state-slider").hover(function() { 
    $(this).animate({ 
    left: '0' 
    }, 500); 
}, function() { 
    $(this).stop(true,true).animate({ left: "-270" }, 500); 
}); 

DEMO

http://api.jquery.com/stop/

Answer 3

có là một ví dụ

http://jsfiddle.net/amkrtchyan/TQz5U/1/

và mã jquery

$(function() { 
    $("#state-slider").hover(function() { 
     $(this).stop(true,true).animate({ 
      left: '0' 
     }, 500); 
    }, function() { 
     $(this).stop(true,true).animate({ left: "-270" }, 500); 
    }); 
});