jQuery链接微移和颜色变换

大家好，我使用以下代码实现了标题中描述的效果：

$(document).ready(function(){

$('.button').mousedown(function() {
    $(this).animate({ 'top': '3px' }, 70);
});
$('.button').mouseup(function() {
    $(this).animate({ 'top': '0px' }, 70);
});
$('.button').hover(function() {
    $(this).stop().animate({ 
        color: '#fff',
        backgroundColor: '#000' 
    }, 250);
});
$('.button').mouseout(function() {
    $(this).stop().animate({ 
        color: '#000',
        backgroundColor: '#fff' 
    }, 250);
});

}))

我很确定这段代码可以显著减少，有人能帮我吗？请注意，我希望在单击鼠标时按钮能够动画化，并且在释放鼠标之前不会返回到其原始位置

---

干杯

您正在滥用

.hover（）

。从API参考中：

描述：将两个处理程序绑定到 匹配的元素，将在 鼠标指针进入并离开 元素

因此，这将加快速度：

$('.button').hover(function() {
    $(this).stop().animate({ 
        color: '#fff',
        backgroundColor: '#000' 
    }, 250);
}, function() {
    $(this).stop().animate({ 
        color: '#000',
        backgroundColor: '#fff' 
    }, 250);
});

---

但是我相信代码不能再进一步优化了。您可以使用

.bind（）

和散列，但这只是稍微快一点/好一点。

首先，您不必围绕“.button”选择器不断地重新生成jQuery对象：

$('.button')
  .mousedown(function() {
    $(this).animate({ 'top': '3px' }, 70);
  })
  .mouseup(function() {
    $(this).animate({ 'top': '0px' }, 70);
  })
  .hover(function() {
    $(this).stop().animate({ 
        color: '#fff',
        backgroundColor: '#000' 
    }, 250);
    },
    function() {
    $(this).stop().animate({ 
        color: '#000',
        backgroundColor: '#fff' 
    }, 250);
  });

不会让它短很多。您也可以考虑使用<代码> LIVER（）/<代码>或<代码>委托（）> <代码> 而不是直接处理按钮。这可能就是我要做的，因为这里的选择器在事件发生时检查起来很便宜。如果你有很多按钮（这可能是个坏主意，尤其是当你移动鼠标时，它们都在跳动），那么分配所有的处理程序可能会有点慢

---

<编辑>由于@ MvangeESt/P>，请考虑<代码> HOVER <代码>执行两次，其中包括一个无用的场合。我固定了我想的悬停-我改变了它通过窃取他旧的“鼠标输出”代码来获取2个功能。是吗？和我一样，而且根据文件是正确的。当然，只有他能告诉我们它是否有效。谢谢，你们俩真的帮了大忙。我忘记了我可以链接方法，而不是每次都引用选择器。移除第二个（不必要的）悬停非常好。虽然短不了多少，但肯定是有所改进。