jQuery Cycle'destroy'命令（和所有其他命令）被忽略

Question

我遇到了jQuery循环忽略所有命令（destory，stop等）的问题。在这个页面上还有很多其他的事情，这可能是有帮助的，但我不确定有多少示例代码太多。

简而言之，我在页面加载时有两个同时幻灯片初始化，并且单击'.video-trigger'时，应该销毁循环实例。但点击后，循环会继续循环（并覆盖应该替换它的视频）。

我已经尝试了所有可能的场景，我可以想到试图找到源代码 - 删除所有其他JavaScript（只剩下循环和销毁点击事件），只尝试调用并销毁两个幻灯片中的一个而不是两者），在单独的包装中调用它们。我甚至删除了这两个循环实例，并在页面的完全不同的部分创建了一个超级简单的“测试”循环和单击事件，并且也无法销毁。不知道我错过了什么。

这里使用的另一个jQuery插件是videojs，如果这是后果的话。

这是除了与视频无关的fancybox以外的所有脚本。如果有助于包括所有内容，请告诉我，但我想我可能已经包含了太多内容。

jQuery(document).ready(function($){ 

    /// fading background images and video trigger 
    $('#background-image-wrapper,#trigger-fade').cycle(); 

    // handle videos 
    $('.video-trigger').click(function() { 
     $('#background-image-wrapper,#trigger-fade').cycle('destroy'); 

     var vidName = $(this).attr('id');   
     var vidID = 'video_' + vidName; 

     $('#background-image-wrapper').append('<div id="vid-cont" class="video-container"></div>'); 
     $('#vid-cont').append('<video id="' + vidID + '" class="video-js vjs-default-skin" preload="auto" data-setup="{}">' + 
      '<source src="http://domain.com/wp-content/themes/sapporo/v/sapporo-'+ vidName +'.mp4" type="video/mp4">' + 
      '<source src="http://domain.com/wp-content/themes/sapporo/v/sapporo-'+ vidName +'.ogv" type="video/ogg">' + 
      '<source src="http://domain.com/wp-content/themes/sapporo/v/sapporo-'+ vidName +'.webm" type="video/webm">' + 
      '</video>'); 

     //alert(vidID); 
     _V_(vidID).ready(function(){ 
      var myPlayer = this; 
      var aspectRatio = 9/16; 
      function resizeVideoJS(){ 
       //var width = document.getElementById(myPlayer.id).parentElement.offsetWidth; // Get the parent element's actual width -- this wasn't working with lower versions of FF 
       var width = document.getElementById('vid-cont').offsetWidth; // Get the parent element's actual width 
       myPlayer.width(width).height(width * aspectRatio); // Set width to fill parent element, Set height 
      } 
     resizeVideoJS(); // Initialize the function 
     window.onresize = resizeVideoJS; // Call the function on resize 

      $('#trigger-fade').fadeOut(); 
      $('#video-controls').fadeIn(); 
      $('.video-container').css('left', '0'); 
      myPlayer.volume(0); 
      myPlayer.play(); //start playing the video 
      var endedEvent = function(){ 
       $('#video-controls').fadeOut(function(){ $('#trigger-fade').fadeIn(); }); 
       $('.video-container').css('left', '-9999em'); 
       $('.background-image').fadeIn('slow'); 
      }; 
      myPlayer.addEvent("ended", endedEvent); 

     $('#pause-video').click(function(){ 
      myPlayer.pause(); 
      $(this).fadeOut(function(){ $('#play-video').fadeIn(); }); 
     }); 
     $('#play-video').click(function(){ 
      myPlayer.play(); 
      $(this).fadeOut(function() { $('#pause-video').fadeIn(); }); 
     }); 
     $('#mute-video').click(function(){ 
      myPlayer.volume(0); 
      $(this).fadeOut(function(){ $('#unmute-video').fadeIn(); }); 
     }); 
     $('#unmute-video').click(function(){ 
      myPlayer.volume(.7); 
      $(this).fadeOut(function() { $('#mute-video').fadeIn(); }); 
     }); 
     $('#close-video').click(function(){ 
      myPlayer.pause(); 
      $('#video-controls').fadeOut(function(){ $('#trigger-fade').fadeIn(); }); 
      $('.video-container').css('left', '-9999em'); 
      $('.background-image').fadeIn('slow'); 
     }); 
     }); 
    }); 
    }); 

UPDATE： 我没有再靠近，以解决问题（且不论，如果我使用周期或循环2它发生）。我已经实现了一个我不满意的解决方法（只是隐藏幻灯片，而它仍在播放视频时仍在运行）。但是我在自定义循环之后注意到，然后试图在不同的单击事件中暂停相同的幻灯片演示，是在命令被触发时，不遵循该命令，但是之前为循环设置的所有自定义选项都被覆盖。

即 如果我开始：

$('#background-image-wrapper,#trigger-fade').cycle({{timeout: 4000, speed: 7000}}); 

然后，使用上的click事件：

$('#background-image-wrapper,#trigger-fade').cycle('destroy'); 

或

$('#background-image-wrapper,#trigger-fade').cycle('pause'); 

然后，而不是破坏或暂停，它基本上只是启动一个Cycle的新实例，就好像'destroy/pause'不存在一样。

Answer 1

我有类似的问题，对我而言，解决方案是将循环存储在变量中并调用该变量来销毁它。像这样：

var mycycle = $('#background-image-wrapper,#trigger-fade').cycle(); 
... 
mycycle.cycle('destroy'); 

不知道你是否仍然需要这个，但也许会有人会。

Answer 2

我有同样的问题。将“摧毁”命令，似乎在这里被完全忽略：

http://brianleatart-art.com/

我只想要一个幻灯片运行在一个时间，但由于“摧毁”命令没有工作，那么保持运行是隐藏的幻灯片。