幻燈片效果（jQuery的）

我不知道這是爲什麼不按預期工作：幻燈片效果（jQuery的）

$(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; 
    }); 

});

JSFiddle

只有main初步顯示出我想，從左側點擊door 1幻燈片適當的容器，並點擊door 2從右側滑動door2容器。

非常感謝您的幫助！

來源

2010-10-27 3zzy

你可以在jsfiddle中演示這個嗎？或者也許分享一些HTML？這是有點不清楚 – Mouhannad 2010-10-27 08:20:43

http://jsfiddle.net/UePuR/36/ – 3zzy 2010-10-27 09:00:06

這裏有幾個問題，我無論出於何種原因都遇到了小提琴造型問題，只是將它移到jsbin中以節省時間。第一個問題是在這裏：

if ($('.door1:visible')) {

這將始終是真實的，因爲它不是falsy，你需要在那裏添加一個.length，看它是否發現任何元素，像這樣：

if ($('.door1:visible').length) {

另一個問題是，你還在$(".door").hide();隱藏它之前檢查可見性，而不是將其移動到結束，不隱瞞你要顯示的門，這樣的：

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。

來源

2010-10-27 10:17:37

偉大的，像我想要的作品！但它仍然不像那些幻燈片/內容滑動條從一張幻燈片移動到另一張幻燈片那樣，我需要做些什麼來實現這種效果？ – 3zzy 2010-10-27 10:42:22

看看這張幻燈片的流暢程度：http://www.ndoherty.biz/demos/coda-slider/2.0/#1 – 3zzy 2010-10-27 11:00:55

@Nimbuz - 這裏有更多的代碼，如果你想要更復雜的東西，你會想要用複雜的東西去......我不明白你爲什麼要基本重寫現有的插件？ – 2010-10-27 11:50:54

幻燈片效果（jQuery的）

回答

相關問題