javascript - JQuery 整理代码

Question

我正在使用一些 javascript 来为 div 类中的类设置动画。

$(".previouscontainer").mouseenter(function(){
    $("a.previousarrow").animate({left:'0px'},"fast");
  });
$(".previouscontainer").mouseleave(function(){
    $("a.previousarrow").animate({left:'10px'},"fast");
  });
$(".nextcontainer").mouseenter(function(){
    $("a.nextarrow").animate({right:'0px'},"fast");
  });
$(".nextcontainer").mouseleave(function(){
    $("a.nextarrow").animate({right:'10px'},"fast");
  });

想知道是否有更好/更清洁的方式来写这个？

Answer 1

你可以把它们串起来。

$(".previouscontainer").mouseenter(function(){
    $("a.previousarrow").animate({left:'0px'},"fast");
  }).mouseleave(function(){
    $("a.previousarrow").animate({left:'10px'},"fast");
  });
$(".nextcontainer").mouseenter(function(){
    $("a.nextarrow").animate({right:'0px'},"fast");
  }).mouseleave(function(){
    $("a.nextarrow").animate({right:'10px'},"fast");
  });

或使用同时具有这两种功能的悬停

$(".previouscontainer").hover(function(){
    $("a.previousarrow").animate({left:'0px'},"fast");
  },function(){
    $("a.previousarrow").animate({left:'10px'},"fast");
  });
$(".nextcontainer").hover(function(){
    $("a.nextarrow").animate({right:'0px'},"fast");
  },function(){
    $("a.nextarrow").animate({right:'10px'},"fast");
  });

或者您可以发疯并创建自己的活动

$("a.previousarrow").on('moveme', function(){
    if ($(this).css('left')>0) $(this).animate({left:'0px'},"fast");
    else $(this).animate({left:'10px'},"fast");
});

如果您需要将其绑定到不能在同一个选择器中的各种操作

$(".previouscontainer").on('mouseover mouseleave', function(){ 
    $("a.previousarrow").trigger('moveme');
});

$('#somethingelse').on('click', function(){
    $("a.previousarrow").trigger('moveme');
});

还有其他方法可以摆动这只猫。.hover()是最明智的。