如何使用jQuery将点击的位置更改为父div的中心？

Question

我想在单击链接时将div移动到父div的中心。

我目前有3个链接，它们对应3个div。 当您单击链接时，它对应的div将被放大（使用css过渡）。 到目前为止这种方法运作良好。 正确的链接会扩大正确的div。

div被放大后（为了让它脱颖而出）我需要div移动到中心，我需要已经在中心的div来取得其他div的位置。 这就是我正在努力实现的目标。 我已经尝试过使用jQuery的append ， prepend ， animate和使用closest但我不知道如何让div移动到中心并让中心的div移动到最近的divs位置。

我希望到目前为止这是有道理的。 我找到了这个小提琴链接（来自关于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
  });
});

这是到目前为止完整工作示例的链接。

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> 

Answer 2

利用溶液insertAfter() -这把 DIV位置和第一个div之后放置它。

见下面的演示：

 $(document).ready(function() { $(".test-links a").click(function() { var $target = $($(this).data('target')); $(".test-slide").not($target).removeClass('active'); if ($target.is('.test-slider .test-slide:first-child')) $target.addClass('active').insertAfter('.test-slider .test-slide:nth-child(2)'); else $target.addClass('active').insertAfter('.test-slider .test-slide:first-child'); 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/3.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> 

Answer 3

可以试试这段代码。 我刚刚在jsfiddle上修改了你的代码：见这里： https ：//jsfiddle.net/6v37ue4y/10/

 $(document).ready(function() { $(".test-links a").click(function() { var $target = $($(this).data('target')); $(".test-slide").not($target).removeClass('active'); $target.addClass('active'); return false }); $('.test-slider div').click(function(e){ var indx = $( ".test-slider div" ).index( $(this) ) ; // alert(indx); if(indx == 0){ $(this).next('div').after($(this)); } else if(indx == 2){ $(this).prev('div').before($(this)); } else { } }); }); 

 .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/1.11.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>