我试图生成一个“好的”CSS菜单使用(主要)CSS，但有一点点的
jQuery：
我的总体想法是：
+------------------------+ | | | | | +---+ | | | | | | |___| | <-- Hover this center piece | | | | | | +------------------------+ +------------------------+ | _ | | |\ | <-- All start moving up to top of screen | \ +---+ | | | | | | |___| | | | | | | | +------------------------+ +------------------------+ | +---+ | | | | | | |___| | | | | || All,but one | | || moves down | | \/ | | | +------------------------+ +------------------------+ | +---+ | | | | | | |___| | | | | One stays,| | +---+ the rest move this way | | | ---> | | |___| | +------------------------+ +------------------------+ | +---+ | | | | | | |___| ^ | The rest move up | | | | | | | +---+ +---+ | | | | | | | | |___| |___| |<-- Another stays +------------------------+
完成：
+------------------------+ | +---+ +---+ | | | 1 | | 4 | | | |___| |___| | | | | | | +---+ +---+ | | | 2 | | 3 | | | |___| |___| | +------------------------+
然而，这假设将有四个div孩子，所以我试图生成一种’确定角度/位置’在jQuery中的方式(这是，说实话，不是太好)。
类似设计：
因此，最后，由于有四个div，它们将与中心成90度的间隔(360/4 div = 90度分开)。
如果有，比方说，六个孩子div;
360/6 = 60 degrees
因此它们将以60度间隔均匀间隔开。
我会在他们之间添加动画，所以为什么我一直在玩旋转等，但我只是不能好像抓住它：
我当前的样本是：
$(".wrap").hover(function(){
var x =$(this).children().length; //Counts '.circles'
var degree = 360 / x; //Gets angle
var percent = 100 / x;
var curPercent = percent;
$(this).children().each(function (index) {
$(this).css("transform","rotate(" + degree*index + "deg)");
$(this).css("top",percent + "px");
$(this).css("left",percent + "px");
percent = percent + curPercent;
});
});
.wrap{
height: 300px;
width: 300px;
background: red;
position: relative;
transform-origin: center center;
transition: all 0.8s;
}
.wrap:hover .circle{
top: 0;
left: 0;
}
.circle{
transition: all 0.8s;
position: absolute;
height: 50px;
width: 50px;
top: calc(50% - 25px);
left: calc(50% - 25px);
background: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="circle">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
会有人：
>(A)：知道如何获得divs“旋转”指定的角度或距离相关的jQuery代码中指定的父？
>(B)：获取“动画”重置悬停出来？
>(C)：有什么想法我在说什么？
类似的实现(虽然不完全)：
> Here
> This more so – 但这使用Sass(不想要)
解决方法
使用不同的方法，你会得到一个稍微不同的效果。您可以使用setTimeout和转换的时间来修改行为。
+ function() {
var to;
$(".wrap").on('mouseenter',function() {
var circles = $(this).children();
var degree = (2 * Math.PI) / circles.length; //calc delta angle
var transforms = [];
// Calculate the position for each circle
circles.each(function(index) {
var x = 100 * Math.cos(-0.5 * Math.PI + degree * (-1 * index - 0.5));
var y = 100 * Math.sin(-0.5 * Math.PI + degree * (-1 * index - 0.5));
transforms.push('translate(' + x + 'px,' + y + 'px)');
});
// Function to moves all the circles
// We'll pop a circle each time and than call this function recursively
function moveCircles() {
var transform = transforms.shift();
circles.css('transform',transform);
circles.splice(0,1);
if (circles.length) to = setTimeout(moveCircles,400);
}
moveCircles();
});
$(".wrap").on('mouseleave',function() {
var circles = $(this).children().css('transform','');
clearTimeout(to);
});
}();
.wrap {
height: 300px;
width: 300px;
background: red;
position: relative;
transform-origin: center center;
transition: all 0.8s;
}
.circle {
transition: all 0.8s;
position: absolute;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
top: calc(50% - 25px);
left: calc(50% - 25px);
background: tomato;
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="circle">1</div> <div class="circle">2</div> <div class="circle">3</div> <div class="circle">4</div> <div class="circle">5</div> <div class="circle">6</div> </div>
