Question

我正在寻找一种更有效的方式（如果有的话）编写一些代码，这些代码可以让我改变元素的规模＆＃39; B ＆＃39;和＆＃39; C ＆＃39;虽然＆＃39; A ＆＃39;徘徊，反之亦然。我已设法让它在jsfiddle中运行，但我希望有更好的方法来实现它。在路上，我希望能够将其整合到旋转木马或类似的东西中，而不会在网站上留下过多的代码。

这是我迄今为止所拥有的，jQuery-wise：

$("#element1") // select your element
.hover(function(){ // trigger the mouseover event
    $("#element2, #element3") // select the elements to shrink
        .css({ transform: 'scale(0.9)' }); // change the scale
}, function(){ // trigger the mouseout event
    $("#element2, #element3") // select the same element
        .css({ transform: 'scale(1)' }); // original scale
});
$("#element2")
.hover(function(){
    $("#element1, #element3")
        .css({ transform: 'scale(0.9)' });
}, function(){
    $("#element1, #element3")
        .css({ transform: 'scale(1)' });
});
$("#element3")
.hover(function(){
    $("#element1, #element2")
        .css({ transform: 'scale(0.9)' });
}, function(){
    $("#element1, #element2")
        .css({ transform: 'scale(1)' });
});

提前感谢您的帮助！

Answer 1

为每个元素而不是id分配一个类（例如，circle），然后使用jquery中的.not()函数选择除了悬停的元素之外的所有元素，然后缩放它们相应

这样您就不必为每个元素上的鼠标悬停编写单独的JQuery代码，当您想要缩放除了悬停元素之外的所有其他元素时，可以使用下面的代码。

代码段：

$(".circle")
  .hover(function() {
    $(".circle").not(this)
      .css({
        transform: 'scale(0.9)'
      });
  }, function() {
    $(".circle").not(this)
      .css({
        transform: 'scale(1)'
      });
  });

#container {
  margin: 0 auto;
  width: 800px;
}
.shape1,
.shape2,
.shape3 {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  float: left;
  margin: 15px;
}
.shape1 {
  background-color: red;
}
.shape2 {
  background-color: green;
}
.shape3 {
  background-color: blue;
}
#element1,
#element2,
#element3 {
  -webkit-transition: all 0.4s ease;
  -webkit-transition-delay: 0.1s;
  -webkit-transform: scale(1);
  transition: all 0.4s ease;
  transition-delay: 0.1s;
  transform: scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class='circle' id="element1">
    <div class="shape1"></div>
    <!-- /shape2 -->
  </div>
  <!-- /element1 -->

  <div class='circle' id="element2">
    <div class="shape2"></div>
    <!-- /shape2 -->
  </div>
  <!-- /span-one-third -->

  <div class='circle' id="element3">
    <div class="shape3"></div>
    <!-- /shape3 -->
  </div>
  <!-- /span-one-third -->
</div>
<!-- /container -->

Answer 2

如果它们都具有相同的直接父级，则可以使用.siblings() jquery函数。我必须查看您的HTML以提供更准确的答案。

您还可以使用以下选择器过滤.siblings()的结果：

 //inside hover
 $(this).siblings('[id^="element"] ');

是否有更有效的方法来编写jQuery代码，这将改变元素的规模，而另一个元素悬停？

2 个答案: