标准化代码

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

你可以链接你的动画：

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)
;

Answer 2

您可以将所有事件放在一个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");