Jquery盘旋多个元素

Question

我正在尝试编写一个执行以下操作的小脚本;

我连续有三个圆圈。如果我悬停一个，那么所有三个必须在彼此顶部向左滑动，并且我指向堆叠顶部的那个。在示例中为蓝色。

之后，所有三个圆圈都必须滑回原位。

这就是我得到的。是的它正在运作但是......

1. 它无法正常工作。
2. 我想知道是否有更好的方法

              

$('.circle').hover(
    function(e){
        $(this).css({'z-index' : '99'});
        $('.circle').animate({'left' : '0px'},1000);
    },
    function(e){
        $(this).css({'z-index' : '0'});
        $('.circle-red').animate({'left' : '0px'},1000);
        $('.circle-blue').animate({'left' : '200px'},1000);
        $('.circle-green').animate({'left' : '400px'},1000);
    }
);

Answer 1

问题是当圆圈离开鼠标时会触发mouseleave功能。让一切都移动到你盘旋的圆圈会更有意义。这样，当你离开圆圈时，它可以恢复正常。

无论如何，我的方法是在对象周围创建容器，用于触发它们回弹到位。看看这个小提琴：http://jsfiddle.net/cz366/2/

要记住的一件事是始终在.stop()之前使用.animate()。这将阻止动画排队等候。停止将清除/终止元素上的动画队列。

Answer 2

这是一个主要使用CSS过渡的实现：

HTML

<div class="circles">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

CSS

// Just basic looks. Notice the position: absolute; and the z-index defaulting to 0.
.circles {
  width: 300px;
  position: relative;  
}
.circle {
  position:absolute;
  display:inline-block; 
  z-index:0;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  border: 2px solid #222;  
  transition: 500ms ease-in;
}
// Positioning for each one using the CSS3 nth-of-type pseudoselector.
.circle:nth-of-type(1) { background:red; left: 0%}
.circle:nth-of-type(2) { background:blue; left: 40%}
.circle:nth-of-type(3) { background:yellow; left: 80%}

// Matched items. jQuery will set all items' data-active attribute to the current active element.
.circle:nth-of-type(1)[data-active="0"],
.circle:nth-of-type(2)[data-active="1"],
.circle:nth-of-type(3)[data-active="2"] { z-index: 2;}

// We'll send all the circles to the same position depending on which is active
.circle[data-active="0"] { left: 0%; }
.circle[data-active="1"] { left: 40%; }
.circle[data-active="2"] { left: 80%; }

JS

$('.circle').on('mouseenter',function() {
  var index = $('.circle').index( $(this) );
  $('.circle').attr('data-active', index);
});

$('.circle').on('mouseleave',function() {
  $('.circle').attr('data-active', '');
});

<强> CODEPEN HERE

这里发生了什么？

jQuery使用index（）方法将[data-active]设置为当前索引（圆圈1为0，圆圈2为1，圆圈3为2 - 注意数字的差异）。

我们使用：nth-​​of-type CSS3伪选择器来匹配data-active属性。如果圈1有[data-active=0]，那么我们将给它一个2的z索引，这样它就可以在顶部。

data-active=0的所有项目都将移至圆圈1：10％的相同位置。 data-active = 1的所有项目将向左移动：40％，依此类推。

注意：为了额外的乐趣，添加transform：rotateY（180deg）; z-index之后：2;属性。

运动是通过过渡：500ms轻松进行;属性，并在left属性更改时自动对动画进行排序。

这可能更简洁，但代码的结构方式，我认为它更容易理解。