javascript - 如何使用 jQuery 将单击时 div 的位置更改为父 div 的中心？

Question

我试图在单击链接时将一个 div 移动到父 div 的中心。

我目前有 3 个链接，它们对应于 3 个 div。当你点击一个链接时，它对应的 div 会被放大(使用 css transitions)。到目前为止，这运作良好。正确的链接放大了正确的 div。

在 div 被放大(使其突出)后，我需要将 div 移动到中心，我需要已经在中心的 div 来取代其他 div。 这就是我努力实现的目标。我尝试使用 jQuery 的 append、prepend、animate 和使用 closest 但我不确定如何让 div 移动到中心并让中心的 div 移动到它最近的 div 位置。

我希望到目前为止这是有意义的。我找到了 this fiddle 链接(来自关于 SO 的问题)，它移动了 div，但它不太正确。

这是我的 HTML 结构:

<div class="test">
  <div class="test-links">
    <ul>
        <li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
        <li><a data-target=".cloud" href="#">Cloud</a></li>
        <li><a data-target=".amazon" href="#">Amazon</a></li>  
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
  </div>
</div>

这是相应的 jQuery:

$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    $target.addClass('active');
    return false
  });
});

Here 是迄今为止完整工作示例的链接。

Answer 1

试试这个。

在.test-slider div中的div元素中找到被点击元素的索引，插入到中间位置。

$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    $target.addClass('active');
    
    $(".test-slider div").each(function(index,elem)
    {
      if($(elem).text() == $target.text())
      {
        if(index > 1)
        $(elem).insertBefore($(".test-slider div").eq(1));
        if(index < 1)
        $(elem).insertBefore($(".test-slider div").eq(2));
      }
    });
    
    
    
    return false
  });
});

.test {
  float: left;
  width: 100%;
  text-align: center;
}

.test-links {
  float: left;
  width: 100%;
  margin: 30px 0;
}

.test-links ul {
  list-style-type: none;
  float: left;
  width: 100%;
  margin: 0;
}

.test-links ul li {
  display: inline-block;
  float: left;
}

.test-links ul li a {
  display: block;
  padding: 30px;
}

.test-slide {
  float: left;
  width: 33.33333%;
  height: 200px;
  color: #fff;
  transition: all 300ms ease;
  opacity: 0.8;
  position: relative;
  z-index: 0;
}

.ecommerce {
  background: blue;
}

.cloud {
  background: red;
}

.amazon {
  background: grey;
}

.test-slide.active {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
  position: relative;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <div class="test-links">
    <ul>
      <li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
      <li><a data-target=".cloud" href="#">Cloud</a></li>
      <li><a data-target=".amazon" href="#">Amazon</a></li>
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
  </div>
</div>

编辑:下面的代码片段是针对该问题的更好的通用解决方案。

$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    $target.addClass('active');
    
    var len = $(".test-slider div").length;
    
    var mid = (Math.floor(len/2));
    
    $(".test-slider div").each(function(index,elem)
    {
      if($(elem).text() == $target.text())
      {
        if(index > mid)
        $(elem).insertBefore($(".test-slider div").eq(mid));
        if(index < mid)
        $(elem).insertBefore($(".test-slider div").eq(mid+1));
      }
    });
    
    
    
    return false
  });
});

.test {
  float: left;
  width: 100%;
  text-align: center;
}

.test-links {
  float: left;
  width: 100%;
  margin: 30px 0;
}

.test-links ul {
  list-style-type: none;
  float: left;
  width: 100%;
  margin: 0;
}

.test-links ul li {
  display: inline-block;
  float: left;
}

.test-links ul li a {
  display: block;
  padding: 30px;
}

.test-slide {
  float: left;
  width: 20%;
  height: 200px;
  color: #fff;
  transition: all 300ms ease;
  opacity: 0.8;
  position: relative;
  z-index: 0;
}

.ecommerce {
  background: blue;
}

.cloud {
  background: red;
}

.amazon {
  background: grey;
}

.paypal {
  background: yellow;
}

.cisco {
  background: green;
}

.test-slide.active {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
  position: relative;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <div class="test-links">
    <ul>
      <li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
      <li><a data-target=".cloud" href="#">Cloud</a></li>
      <li><a data-target=".amazon" href="#">Amazon</a></li>
       <li><a data-target=".paypal" href="#">Paypal</a></li>
        <li><a data-target=".cisco" href="#">Cisco</a></li>
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
    <div class="test-slide paypal">
      Paypal
    </div>
    <div class="test-slide cisco">
      Cisco
    </div>
  </div>
</div>