jQuery的淡入（）应该只显示一个DIV，正显示出多个div

更新：这里的链接 http://15four.com/interactiveVideo/jQuery的淡入（）应该只显示一个DIV，正显示出多个div

OK，我工作的一个项目，基本上是一个“选择自己的冒险”风格的视频情况。它的工作方式是这样的：

播放视频
组事件侦听器“结束”选手状态
显示有两个按钮相应的div
用户点击两个中的一个按钮
负载对应的视频基于哪个按钮他们点击
重复

在第一个视频中一切正常。 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; }

来源

2013-05-03 coulbourne

原来的事件侦听我对端事件设置没有得到去除，从而第二次结束的事件发生了，有两个监听器监听它。

来源

2013-05-07 17:05:41 coulbourne

jQuery的淡入（）应该只显示一个DIV，正显示出多个div

回答

相关问题