[英]JQuery Animate Z-Index?
In my page I have different menu items that trigger different corresponding pictures. 在我的页面中,我有不同的菜单项触发不同的对应图片。 The z-index
switches the corresponding picture to the top. z-index
将相应的图片切换到顶部。 Here is the code: 这是代码:
$(document).ready(function(){
var doorOpen = false;
$("a[href=#andrew]").click(function() {
if (doorOpen) { // set animation duration for door close, based on actually needed to animate the door closed or not
var duration = 1500;
} else {
var duration = 0;
}
$("#rightdoor,#leftdoor").animate(
{"marginLeft":"0px"},
{duration:duration,
complete:function() {
$('.pic2 .pic3 .pic4 .pic5').css('zIndex', 1); //puts wrong pics in back
$('.pic1').css('zIndex', 2); //brings right pic into view
$('#rightdoor').animate({ //opens doors again
marginLeft: "150px",
}, 1500);
$('#leftdoor').animate({
marginLeft: "-150px",
}, 1500);
}
}
);
doorOpen = true;
});
$("a[href=#bugz]").click(function() {
if (doorOpen) { // set animation duration for door close, based on actually needed to animate the door closed or not
var duration = 1500;
} else {
var duration = 0;
}
$("#rightdoor,#leftdoor").animate(
{"marginLeft":"0px"},
{duration:duration,
complete:function() {
$('.pic1 .pic3 .pic4 .pic5').css('zIndex', 1); //puts wrong pics in back
$('.pic2').css('zIndex', 2); //brings right pic into view
$('#rightdoor').animate({ //opens doors again
marginLeft: "150px",
}, 1500);
$('#leftdoor').animate({
marginLeft: "-150px",
}, 1500);
}
}
);
doorOpen = true;
});
});
The problem is that the z-index
works but only once per menu item it seems. 问题在于z-index
有效,但似乎每个菜单项只有一次。 If you initially click #andrew
, it brings pic1 to the top and if you click #bugz
it brings pic2 to the top. 如果最初单击#andrew
,则它将pic1移至顶部,如果单击#bugz
,则将#bugz
移至顶部。 However, if you click #andrew
again it animates the code before and after the .css(z-index)
change but does not change the z-index
to bring pic1 back to the top. 但是,如果单击#andrew
并再次#andrew
,它将在.css(z-index)
更改前后对代码进行动画处理,但不会更改z-index
以使pic1返回顶部。
I am new to Javascript/JQuery so please forgive me if I am missing something obvious 我是Javascript / JQuery的新手,所以如果我遗漏了一些明显的内容,请原谅我
Your selector is wrong: $('.pic2 .pic3 .pic4 .pic5')
looks for descendants of .pic2
. 你的选择是错误的: $('.pic2 .pic3 .pic4 .pic5')
查找的后代.pic2
。
You could use commas to separate those classes instead of spaces, but it's simpler to use the .siblings
method instead: 您可以使用逗号来分隔这些类而不是空格,但是使用.siblings
方法更简单:
$('.pic1').css('zindex',2).siblings().css('zindex',1);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.