jQuery Cycle 'destroy' 命令(和所有其他命令)被忽略

Question

我在 jQuery 循环中遇到问题，只是忽略了所有命令(销毁、停止等)。此页面上还有很多其他内容，这些内容可能有所贡献，但我不确定有多少示例代码太多。

简而言之，我有两个同步幻灯片，它们在页面加载时初始化，当单击“.video-trigger”时，循环实例应该被销毁。但点击后，循环会继续循环(并覆盖本应取代它的视频)。

我已经尝试了我能想到的所有可能的场景来尝试找到源代码 - 删除所有其他 javascript(仅剩下循环和销毁单击事件)，仅尝试调用并销毁两个幻灯片之一(而不是两者)，在单独的包装器中调用它们。我什至删除了这两个循环实例，并在页面的完全不同部分制作了一个 super 简单的“测试”循环和单击事件，并且该循环实例也无法被销毁。不确定我错过了什么。

这里使用的另一个 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'); 
         });
       });
    });
   });

更新:我还没有更接近解决这个问题(无论我使用 Cycle 还是 Cycle2，它都会发生)。我已经实现了一个我不满意的解决方法(只是隐藏幻灯片，而它在视频播放时仍在运行)。但我确实注意到，在自定义循环后，然后尝试在不同的单击事件上暂停相同的幻灯片时，触发命令时，不会遵循该命令，但我之前为循环设置的所有自定义选项都会被覆盖。

即如果我从以下开始:

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

然后，在点击事件上使用它:

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

或

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

然后，它基本上只是启动一个新的 Cycle 实例，而不是销毁或暂停，就好像“销毁/暂停”不存在一样。

Answer 1

我也遇到同样的问题。 “销毁”命令似乎在这里被完全忽略:

http://brianleatart-art.com/

我只想一次运行一张幻灯片，但由于“销毁”命令不起作用，它会继续运行隐藏的幻灯片。