标题可能没有意义。
基本上我想将所有“.mainContent”存储到X ..
然后,当你单击一个按钮时,它会使x [0]显示为无,并引入x [1] ..如果这是有道理的......那样我可以有相同的擦除过渡,它只会带来我的我会有4个不同的页面。
你可以在这里看到我的页面:我有硬编码的“home”和“了解更多”页面,但我显然不希望每个部分都这样做
http://mikecioffi-me.stackstaging.com/(*这不是手机***)只有桌面。移动版还没有准备好......哈哈
<script>
var dissapearingTime = 1800;
var nextSlideTime = 3000;
var originalNumber = 0;
var newNumber = 1;
var x = $(this).find('.mainContent');
$('.button').hover(
function () {
$('.arrowRight').toggleClass('active');
})
$('.button').click(
function () {
console.log(x);
$('.sidebar').toggleClass('anim-trans');
setTimeout(function () {
$(".hero").css("display", "none");
$(".blank").css("display", "block");
}, dissapearingTime);
setTimeout(function () {
$('.sidebar').toggleClass('anim-trans');
}, nextSlideTime);
})
function hello() {
$('.sidebar').toggleClass('anim-trans');
setTimeout(function () {
$(".blank").css("display", "none");
$(".hero").css("display", "block");
}, dissapearingTime);
setTimeout(function () {
$('.sidebar').toggleClass('anim-trans');
}, nextSlideTime);
}
</script>
我喜欢你的动画:)。
我不知道你如何使用它,但你可以用这种方式。我希望它可以帮到你。
myArray = $('.test');
$(myArray[0]).hide();
一种方法是用id标记每个card / div / item,然后你可以使用全局命名空间/ json对象/字典为你自己的页面隐藏显示,它在范围之间保存一些额外的信息。
window.__ok = {'current': '', 'prev': null}
var x = $('.main > div');
['#c0', '#c1', '#c2'].map(function(c,i,a){
$(c).on('click', function(a){
window.__ok.prev = window.__ok.current;
window.__ok.current = i;
alert(`show ${c} id: ${i} prev: ${window.__ok.prev}`);
if ($(`#${window.__ok.current}`).css('display') == 'none'){
$(`#${window.__ok.current}`).css('display', 'block');
$(`#${window.__ok.prev}`).css('display', 'none');
}
})
})
.red {
background-color: red;
height: 30px;
display: none
}
.blue {
background-color: blue;
height: 30px;
display: none
}
.green {
background-color: green;
height: 30px;
display: none
}
span {
color: grey;
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div id="0" class="red">a</div>
<div id="1" class="blue">b</div>
<div id="2" class="green">c</div>
</div>
<span id="c0">show0</span><br>
<span id="c1">show1</span><br>
<span id="c2">show2</span><br>