jquery - 过渡或其他

Question

我有点坚持执行此操作的最佳实践。我的页眉中有一张标尺图片，位于导航栏上方。我使用“mouseenter”，标尺向右移动，在您悬停的按钮上方。我将 JQuery 与鼠标输入/离开一起使用，它采用数据标尺移动值并添加一个带有转换/翻译规则的类。它工作正常但是......看着css，我为每个位置写了一个新规则。这是五个按钮。这是相当多的CSS。另外，当窗口变小并且标尺变小时(Bootstrap css 响应)，我将不得不更改这些变换值。如果有的话，我正在寻找更好或更短的代码。我查看了 sass 是否有帮助，但没有找到任何东西。如果可能的话，我现在只想使用 css/html/JS。在此先感谢您的帮助。 Jason Css 和 js 跟随。

$(".navbar-inverse .navbar-nav>li>a").mouseenter(function() {
  var moveTo = $(this).data("ruler-moves");
  console.log(moveTo);
  $(".ruler").addClass(moveTo);

  $(".navbar-inverse .navbar-nav>li>a").mouseleave(function() {
    $(".ruler").removeClass(moveTo);
  });
});

.ruler {
    margin-top: 55px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
}

.home {
    -webkit-transform: translate(4em, 0);
    -moz-transform: translate(4em, 0);
    -o-transform: translate(4em, 0);
    -ms-transform: translate(4em, 0);
}

.contact {
   -webkit-transform: translate(8em, 0);
   -moz-transform: translate(8em, 0);
   -o-transform: translate(8em, 0);
   -ms-transform: translate(8em, 0);
}

.estimate {
   -webkit-transform: translate(12em, 0);
   -moz-transform: translate(12em, 0);
   -o-transform: translate(12em, 0);
   -ms-transform: translate(12em, 0);
}

.gallery {
   -webkit-transform: translate(16em, 0);
   -moz-transform: translate(16em, 0);
   -o-transform: translate(16em, 0);
   -ms-transform: translate(16em, 0);
}

.references {
   -webkit-transform: translate(20em, 0);
   -moz-transform: translate(20em, 0);
   -o-transform: translate(20em, 0);
   -ms-transform: translate(20em, 0);
}

<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS (Bootstrap)-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme (Bootstrap) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript (Bootstrap)-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div class="row header">
  <div class="col-md-6">
    <a href="index.php">
      <img class="img-responsive logo" src="images/logo.jpg">
    </a>
  </div>

  <div class="col-md-6">
    <img src="images/ruler.jpg" class="img-responsive ruler">
  </div>
</div>
<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav pull-right my-nav">
    <li><a href="index.php" data-ruler-moves="home">Home</a></li>
    <li><a href="contact.php" data-ruler-moves="contact">Contact</a></li>
    <li><a href="estimate.php" data-ruler-moves="estimate">Estimate</a></li>
    <li><a href="gallery.php" data-ruler-moves="gallery">Gallery</a></li>
    <li><a href="references.php" data-ruler-moves="references">References</a></li>
  </ul>
</div>

Answer 1

您可以轻松地为此创建混合，将您想要的值作为参数传递:

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

这将为您提供更短的 SASS 文件，并使其更快、更有效地定位元素。我通常做的也是在这个 mixin 中应用 position: absolute; 以及 top, right, left 和 bottom 规则以方便使用。

我什至会更进一步并创建一个transitions mixin:

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

然后像这样使用它:

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