Jquery Animate trên Hover

Question

Tôi có một văn bản mà tôi muốn động khi đang gặp một con chuột trên nó cho ví dụ:

$(".tabb tr").hover(
    function(){ 
    $(this).find("td #headie").animate({marginLeft:'9px'},'slow') 
    }, 
    function() { 
    $(this).find("td #headie").animate({marginLeft:'0px'},'slow') 
    }); 

với điều này .. khi đang gặp chuột lên hàng .. cột bảng hoạt hình bằng cách di chuyển ít.

Vấn đề ở đây là: khi tôi di chuyển con trỏ chuột nhiều lần trên các hàng này và sau đó dừng lại và xem .. hoạt ảnh tiếp tục diễn ra trong một thời gian ngay cả khi không di chuyển chuột qua nó. IT KEEPS MOVING ITSELF sau ..

làm cách nào tôi có thể dừng điều đó?

Answer 1

Có vẻ như bạn muốn liên kết với mousemove không di chuột, nhưng cũng tạo trình xử lý cho di chuột như $(foo).mouseout(function(){$(this).stop();}) để chấm dứt hoạt ảnh.

Answer 2

tôi đã nhận nó theo cách tôi muốn .. sau đây là sự thay đổi tôi đã thực hiện "animate ({marginLeft: '0px'}, 0)"

Kiểm tra mã dưới đây ..

$(document).ready(function(){ 
    $(".tabb tr").mouseover(function(){ $(this).find("td #headie").animate({marginLeft:'9px'},'fast') }); 
    $(".tabb tr").mouseout(function(){ $(this).find("td #headie").animate({marginLeft:'0px'},0) }); 
}); 

Answer 3

một bài viết rất tốt bằng văn bản về hình ảnh động trơn tru jquery trên di chuột, mà tôi tìm thấy, là một trong những điều này bằng cách Chris Coyier trên CSS Tricks:

http://css-tricks.com/full-jquery-animations/

Vì vậy, việc lắp mã này vào mã của bạn sẽ trông giống như sau:

$(".tabb tr").hover(
function(){ 
    $(this).filter(':not(:animated)').animate({ 
    marginLeft:'9px' 
    },'slow'); 
// This only fires if the row is not undergoing an animation when you mouseover it 
}, 
function() { 
    $(this).animate({ 
    marginLeft:'0px' 
    },'slow'); 
}); 

Về cơ bản, nó sẽ kiểm tra xem hàng có đang hoạt hình hay không, chỉ sau đó nó gọi là hình động chuột.

Hy vọng rằng hàng của bạn bây giờ sẽ animate hơi như hai ví dụ cuối cùng trên trang này:

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

Answer 4

jQuery cung cấp eventHandlers đặc biệt cho nhu cầu của bạn :) sử dụng mouseenter và mouseleave

$(".tabb tr").mouseenter(
    function(){ 
    $(this).find("td #headie").animate({marginLeft:'9px'},'slow') 
    }); 
$(".tabb tr").mouseleave(
    function() { 
    $(this).find("td #headie").animate({marginLeft:'0px'},'slow') 
    });