[英]Slide effect (jQuery)
I wonder why this isn't working as expected: 我想知道为什么这不能按预期工作:
$(function() {
$(".door1-trigger").click(function() {
$(".door").hide();
// $(".door1").show("slide", { direction: "right" }, 1000);
return false;
});
$(".door2-trigger").click(function() {
$(".door").hide();
$(".door2").show("slide", { direction: "left" }, 1000);
return false;
});
$(".main-trigger").click(function() {
$(".door").hide();
if ($('.door1:visible')) {
$(".main").show("slide", { direction: "left" }, 1000);
} else {
$(".main").show("slide", { direction: "right" }, 1000);
}
return false;
});
});
I would like only the main
shown initially, clicking on door 1
slides the appropriate container from left, and clicking door 2
slides the door2 container from right. 我想只显示最初显示的
main
,点击door 1
从左侧滑动相应的容器,然后点击door 2
从右侧滑动门door 2
容器。
Many thanks for your help! 非常感谢您的帮助!
There were a few issues here, I had trouble with the fiddle styling for whatever reason, just moved it to jsbin to save time. 这里有一些问题,无论出于何种原因我都无法使用小提琴样式,只是将其移动到jsbin以节省时间。 The first issue is here:
第一个问题在这里:
if ($('.door1:visible')) {
This will always be true, since it's not falsy, you need to add a .length
on there to see if it found any elements, like this: 这将永远是真的,因为它不是假的,你需要在那里添加一个
.length
来查看它是否找到了任何元素,如下所示:
if ($('.door1:visible').length) {
The other issue is you were hiding it with $(".door").hide();
另一个问题是你用
$(".door").hide();
隐藏了它$(".door").hide();
before checking the visibility, instead move it to the end and don't hide the door you want to show, like this: 在检查可见性之前 ,将其移动到最后并且不要隐藏您想要显示的门,如下所示:
if ($('.door1:visible').length) {
$(".main").show("slide", { direction: "left" }, 1000);
} else {
$(".main").show("slide", { direction: "right" }, 1000);
}
$(".door:not(.main)").hide();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.