Jquery 过渡或其他

我有点执着于做这件事的最佳实践。我的头顶上有一把尺子的照片，它位于导航栏上方。我使用“mouseenter”，标尺向右移动，在您悬停的按钮上方。我使用带有鼠标enter/leave的JQuery，它获取数据标尺move值，并添加一个带有转换/转换规则的类。它工作正常，但是。。。看看css，我为每个职位写了一条新规则。这是五个按钮。这是相当多的css。另外，当窗口变小，标尺变小时，我必须更改这些转换值（引导css响应）。我正在寻找更好或更短的代码量，如果有。我想看看sass是否能帮上忙，但没有发现任何东西。如果可能的话，我现在只想使用css/html/JS。谢谢你的帮助。Jason Css和js将遵循

$（“.navbar inverse.navbar nav>li>a”）.mouseenter（函数（）{
var moveTo=$（this）.data（“标尺移动”）；
console.log（moveTo）；
$（“.ruler”）.addClass（moveTo）；
$（“.navbar inverse.navbar nav>li>a”）.mouseleave（函数（）{
$（“.ruler”）.removeClass（moveTo）；
});
});
标尺{
边缘顶部：55px；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
-o型转换：所有1均易于输入输出；
-ms转换：所有1都易于输入输出；
}
.家{
-webkit转换：翻译（4em，0）；
-moz变换：平移（4em，0）；
-o变换：平移（4em，0）；
-ms变换：平移（4em，0）；
}
.联系方式{
-webkit转换：翻译（8em，0）；
-moz变换：平移（8em，0）；
-o变换：平移（8em，0）；
-ms变换：平移（8em，0）；
}
.估计{
-webkit转换：翻译（12em，0）；
-moz变换：平移（12em，0）；
-o变换：平移（12em，0）；
-ms变换：平移（12em，0）；
}
.画廊{
-webkit转换：翻译（16em，0）；
-moz变换：平移（16em，0）；
-o变换：平移（16em，0）；
-ms变换：平移（16em，0）；
}
.推荐人{
-webkit转换：翻译（20em，0）；
-moz变换：平移（20em，0）；
-o变换：平移（20em，0）；
-ms变换：平移（20em，0）；
}








您可以轻松地为此创建一个mixin，将所需的值作为参数传递：

@mixin posXY($x, $y) {
  -webkit-transform: translate($x, $y);
  -moz-transform: translate($x, $y);
  -o-transform: translate($x, $y);
  -ms-transform: translate($x, $y);
  transform: translate($x, $y);
}

然后像这样使用它：

.gallery {
  @include posXY(4em, 0);
}

.ruler {
  @include transitions(all, 400ms, ease-in-out);
}

这将使您的SASS文件更短，并且可以更快、更高效地定位元素。我通常做的也是应用一个
位置：绝对以及方便使用的
顶部
、
右侧
、
左侧
和
底部
规则

我甚至会更进一步，创建一个
transitions
mixin:

@mixin transitions($property, $duration, $effect) {
  -webkit-transition: -webkit-$property $duration $effect;
  transition: $property $duration $effect;
}

然后像这样使用它：

.gallery {
  @include posXY(4em, 0);
}

.ruler {
  @include transitions(all, 400ms, ease-in-out);
}

改进代码的另一个步骤是加快编写速度，因此：

$(".navbar-inverse .navbar-nav>li>a")

应该保存在一个变量中，所以如果它发生变化，您不必在10个不同的地方重写它，代码才能再次工作。这样做：

var anchor = $(".navbar-inverse .navbar-nav>li>a");

anchor.mouseenter(function() {

  // Your code here
});

anchor.mouseleave(function() {

  // Your code here
});

PS如果这是一个不好的提问方式，请解释我如何可以更清楚或更简洁。再次感谢！我们可以也要HTML吗？或者我们可以使用任何标记来获得想要的效果吗？我把它放进去了！非常感谢。