点击时,我正试图为div
设置动画。如果单击div
,它应该设置动画并与第一个div
交换,并且还应更新DOM。
问题现在是te distance
变量。我无法计算两个div之间的距离。
这是我的小提琴:http://jsfiddle.net/GUsYQ/120/
<div id="container">
<div id="one" class="move">div 1</div>
<div id="one" class="move">div 2</div>
<div id="one" class="move">div 3</div>
</div>
var animating = false;
$('#container').on('click', '.move', function (e) {
var clickedDiv = $(this).closest('div'),
prevDiv = $("#one"),
//distance = clickedDiv.offset.left - $("#one").offset.left;
distance = 60; //manually set
if (prevDiv.length) {
animating = true;
$.when(clickedDiv.animate({
left: -distance
}, 2000),
prevDiv.animate({
left: distance
}, 2000)).done(function () {
prevDiv.css('left', '0px');
clickedDiv.css('left', '0px');
clickedDiv.insertBefore($("#one"));
animating = false;
});
}
});
#container {
color:#fff;
position: relative;
text-align: center;
}
#container div {
position: relative;
background:#ff00ab;
padding:5px;
border-radius:3px;
text-align:center;
display:inline-block;
margin: 20px;
}
答案 0 :(得分:2)
实际上,您的jQuery选择器未能找到相应的divs
。
.move
是您的<a>
代码,您所做的是:
// Select the first <a> tag!!
prevDiv = $(this).first();
// Try to insert a div before the <a> tag
clickedDiv.insertBefore(prevDiv);
我用优秀的选择器更新了JSFiddle:http://jsfiddle.net/jpreynat/sh9vbbum/1/
答案 1 :(得分:1)
你应该为css
设置动画=,我说的是z-index
属性。基本上如果你想让div在另一个div之上,它应该比你试图隐藏的那个高z-index
。
以下是操作z-index的W3C官方页面: http://www.w3.org/wiki/CSS/Properties/z-index