JQuery 整理代码

Question

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

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

或使用

hover

来实现这两个功能

$(".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()

最明智了