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

标准化代码

2 个答案: