使用jQuery鼠标悬停鼠标输出时链接的淡化颜色

Question

当你在jQuery中鼠标悬停链接时,我试图实现一个很好的淡化效果.

到目前为止,我有:

$('a').hover(
function () { 
    $(this).animate({ color: '#fff' }, 1000 );
},
function () { 
    $(this).animate({ color: '#000' }, 1000 );
});

哪个确实工作正常.但是,想象一下,如果链接是导航,彼此接近.如果您尝试从一个链接悬停到旁边的链接并返回几次.链接会逐渐消失,如果有动画已经发生,我如何阻止事件"排队"？

任何建议赞赏!

Answer 1

你正在寻找这个stop功能

$('a').hover(
    function () { 
        $(this).stop().animate({ color: '#fff' }, 1000 );
    },
    function () { 
        $(this).stop().animate({ color: '#000' }, 1000 );
    }
);