Question

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

$(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);
});

}）;

我很确定此代码可以显着减少，任何人都可以帮助我吗？请注意，我希望按钮在单击鼠标时进行动画处理，并且在鼠标释放之前不会返回原始位置。

干杯

Answer 1

你在滥用.hover()。从API参考：

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

所以这会加快速度：

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

但我相信代码无法进一步优化。你可以使用.bind()和哈希，但这只是稍微快一点/更好。

Answer 2

有一件事你不必在“.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);
  });

不会缩短它。您也可以考虑使用live()或delegate()执行此操作而不是直接处理按钮。这可能就是我要做的，因为这里的选择器很便宜，可以检查事件发生的时间。如果你有很多按钮（这可能是一个坏主意，特别是当你移动鼠标时它们都是脉动和悸动），分配所有处理程序可能会有点慢。

编辑 - 感谢@MvanGeest

jQuery链接轻推和颜色转换

2 个答案: