jquery - 标准化代码

Question

对于这个问题，我不是一个 jQuery 精明的人。我的项目中有一些动画按钮的代码：

$('.slideshow_thumbOutline').on('mouseenter', function(){
    $(this).animate({'border-color':'#000000'}, 150);
  });

  $('.slideshow_thumbOutline').on('mouseleave', function(){
    $(this).animate({'border-color':'#ffffff'}, 150);
  });

  $('.slideshow_thumbOutline').on('click', function(){
    $(this).animate({'background-color':'#000000'}, 150,
      function(){
        $(this).animate({'background-color':'#ffffff'}, 150);
      }
    );
  });

... mouseenter/mouseleave/click 事件。我有大约7个。

问：为了避免重蹈覆辙，如何规范这个？

谢谢。

佩德罗

Answer 1

您可以将所有事件放在一个on函数中：

$("body").on({
    mouseenter: function() {
        $(this).animate({'border-color':'#000000'}, 150);
    },
    mouseleave: function() {
        $(this).animate({'border-color':'#ffffff'}, 150);
    },
    click: function() {
        $(this).animate({'background-color':'#000000'}, 150,
            function(){
                $(this).animate({'background-color':'#ffffff'}, 150);
            }
        );
    }
}, ".slideshow_thumbOutline");

Answer 2

你可以链接你的动画：

function mouseLeaveAnimation() {
    $(this).animate({'border-color':'#ffffff'}, 150);
}
function mouseEnterAnimation() {
    $(this).animate({'border-color':'#000000'}, 150);
}
function thumbClicked() {
    $(this).animate({'background-color':'#000000'}, 150,
      function(){
        $(this).animate({'background-color':'#ffffff'}, 150);
      }
    );
}

// now add these behaviours to your HTML elements.
$('slideshow_thumbOutline')
  .on('mouseleave', mouseLeaveAnimation)
  .on('mouseenter', mouseEnterAnimation)
  .on('click', thumbClicked)
;