动画点击 div
Animate clicked div
我有 3 个 div,其中 "left"
、"active"
和 "right"
看起来像这样:
...现在,每当我单击左侧 div 时,它就会动画并变为活动状态,并且活动的那个会占据它的位置,我需要它对右侧 div 也做同样的事情.基本上,我需要一种方法让 div 在有人点击它们后变得活跃,而前一个活跃 div 将其置于左侧或右侧 div 取决于点击哪个.
为此,我还想更改 class 名称,以便当您单击左侧 div 时,它会在中心显示动画,我尝试添加 $(this).removeClass('left').addClass('active');
和其他方式围绕活动 div 但它没有用,它没有在它们之间切换 classes。
这是我目前所拥有的 JSFIDDLE
您不需要不同的 classes,您可以只使用一个 class box
并使用 CSS 的 :last-of-type
和:nth-of-type()
个选择器。
在 jQuery 中,您可以根据 left
值对 div
进行动画处理。
$('.box').click(function() {
if ($(this).css('left') != '125px') {
var l = ($(this).css('left') == '0px') ? 0 : 400;
$(this).animate({
width: 250,
height: 250,
left: 125,
top: 0,
opacity: 1
}, 400);
$('.active').animate({
width: 100,
height: 100,
left: l,
top: 75,
opacity: 0.3
}, 400);
$('#header > .box').removeClass('active');
$(this).addClass('active');
}
});
#header {
list-style: none;
width: 500px;
height: 250px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: #ebebeb;
}
.box {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 75px;
background: black;
opacity: 0.3;
}
.box:nth-of-type(2) {
width: 250px;
height: 250px;
top: 0;
left: 125px;
opacity: 1;
}
.box:last-of-type {
left: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header">
<div class="box"></div>
<div class="box active"></div>
<div class="box"></div>
</div>
我有 3 个 div,其中 "left"
、"active"
和 "right"
看起来像这样:
...现在,每当我单击左侧 div 时,它就会动画并变为活动状态,并且活动的那个会占据它的位置,我需要它对右侧 div 也做同样的事情.基本上,我需要一种方法让 div 在有人点击它们后变得活跃,而前一个活跃 div 将其置于左侧或右侧 div 取决于点击哪个.
为此,我还想更改 class 名称,以便当您单击左侧 div 时,它会在中心显示动画,我尝试添加 $(this).removeClass('left').addClass('active');
和其他方式围绕活动 div 但它没有用,它没有在它们之间切换 classes。
这是我目前所拥有的 JSFIDDLE
您不需要不同的 classes,您可以只使用一个 class box
并使用 CSS 的 :last-of-type
和:nth-of-type()
个选择器。
在 jQuery 中,您可以根据 left
值对 div
进行动画处理。
$('.box').click(function() {
if ($(this).css('left') != '125px') {
var l = ($(this).css('left') == '0px') ? 0 : 400;
$(this).animate({
width: 250,
height: 250,
left: 125,
top: 0,
opacity: 1
}, 400);
$('.active').animate({
width: 100,
height: 100,
left: l,
top: 75,
opacity: 0.3
}, 400);
$('#header > .box').removeClass('active');
$(this).addClass('active');
}
});
#header {
list-style: none;
width: 500px;
height: 250px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: #ebebeb;
}
.box {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 75px;
background: black;
opacity: 0.3;
}
.box:nth-of-type(2) {
width: 250px;
height: 250px;
top: 0;
left: 125px;
opacity: 1;
}
.box:last-of-type {
left: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header">
<div class="box"></div>
<div class="box active"></div>
<div class="box"></div>
</div>