jQuery的淡入（）應該只顯示一個DIV，正顯示出多個div

Question

更新：這裏的鏈接 http://15four.com/interactiveVideo/

OK，我工作的一個項目，基本上是一個「選擇自己的冒險」風格的視頻情況。它的工作方式是這樣的：

1. 播放視頻
2. 組事件偵聽器「結束」選手狀態
3. 顯示有兩個按鈕相應的div
4. 用戶點擊兩個中的一個按鈕
5. 負載對應的視頻基於哪個按鈕他們點擊
6. 重複

在第一個視頻中一切正常。 div裝載得很好，點擊按鈕正確加載並播放下一個視頻。問題是，當我到達第二個視頻的末尾時，它應該顯示第二個選擇您自己的冒險div，它將同時顯示第一個和第二個CYOA div，第二個顯示在第一個頂部。

這裏是JS功能，顯示的div：

function loadModal(stage){ 
    var option1 = stage.modal.find("a.option1"); 
    var option2 = stage.modal.find("a.option2"); 

    var target1 = stage.option1; 
    var target2 = stage.option2; 

    stage.modal.fadeIn(1000); 

    if(target1 != "div") { 
     option1.click(function(){ 
      stage.modal.hide(); 
      console.log(target1); 
      setMode(stages[target1]); 
     }); 
    } else { 
     setMode(stages.excite); 
     video.pause(); 
    } 
    if(target2 != "div") { 
     option2.click(function(){ 
      stage.modal.hide(); 
      console.log(target2); 
      setMode(stages[target2]); 
     }); 
    } else { 
     setMode(stages.excite); 
     video.pause(); 
    } 
} 

這裏是包含所有數據的增值經銷商：

var i = 0; 
var video = _V_("player"); 

var stages = { 
       "excite": { 
           "video": "vid/Clip_1.mov", 
           "modal": $('#exciteModal'), 
           "option1": "commit", 
           "option2": "compete" 
          }, 
       "commit": { 
           "video": "vid/Clip_2.mov", 
           "modal": $('#commitModal'), 
           "option1": "div", 
           "option2": "compete", 
           "aside1": "pdf1", 
           "aside1": "iWill", 
           "aside1": "displayVis", 

          }, 
       "compete": { 
           "video": "vid/Clip_3.mov", 
           "modal": $('#competeModal'), 
           "option1": "div", 
           "option2": "div", 
           "aside1": "pdf2", 
           "aside1": "salesChamp", 
           "aside1": "numberCrunch", 
          } 
      }; 

最後：標記爲div的

HTML

<div id="exciteModal" class="modals"> 
    <a class="option1" href="#1" data-target="commit">UA's Commitment</a> 
    <a class="option2" href="#2" data-target="compete">Compete</a> 
</div> 
<div id="commitModal" class="modals"> 
    <a class="option1" href="#1" data-target="commit">Sign In</a> 
    <a class="option2" href="#2" data-target="compete">Compete</a> 
</div> 
<div id="competeModal" class="modals"> 
    <a class="option1" href="#1" data-target="commit">Sign In</a> 
    <a class="option2" href="#2" data-target="compete">Train</a> 
</div> 

CSS

#exciteModal, #commitModal, #competeModal { 
    display: none; } 

.modals { 
    position: relative; 
    margin-top: -540px; 
    width: 960px; 
    height: 540px; 
    background: rgba(0, 0, 0, 0.8); 
    z-index: 1000; } 
    .modals a { 
    display: inline-block; 
    background: rgba(255, 255, 255, 0.2); 
    padding: 20px; 
    border-radius: 10px; 
    margin-top: 210px; 
    border: 1px solid white; 
    color: white; } 

Answer 1

原來的事件偵聽我對端事件設置沒有得到去除，從而第二次結束的事件發生了，有兩個監聽器監聽它。