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").hid开发者_如何转开发e();
$(".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;
});
});
JSFiddle
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.
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. 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:
if ($('.door1:visible').length) {
The other issue is you were hiding it with $(".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();
You can test it out here.
精彩评论