jQuery動畫未執行

Question

我一直在編寫jQuery循環插件。

首先，動畫從不發生。每個「幻燈片」默認會在那裏停留8秒鐘，並且永遠不會在沒有轉換的情況下「彈出」到下一個圖像。以下是我的代碼。我通過JSLint運行它，唯一出現的問題是options從來沒有在第103行上使用過。我猜這段代碼與我的插件沒有按預期工作的原因有關。現場示例可在查看。

其次，這是Making a slider without recursion的後續問題，其中我的腳本不是插件。但它確實有效，但我仍然在尋求答案。謝謝。

jQuery(document).ready(function() { 
    'use strict'; 
    (function ($) { 

     var methods = { 
      init: function (options) { 

       return this.each(function() { 

        var settings = { 
         'delay':  5000, 
         'direction': 'left', 
         'easing':  'swing', 
         'selector':  '*', 
         'transition': 3000 
        }; 

        if (options) { 
         $.extend(settings, options); 
        } 

        $(this).css({ 
         'overflow': 'hidden', 
         'position': 'relative' 
        }); 

        if ($(this).children(settings.selector).length > 1) { 
         $(this).cycle('slide', settings); 
        } 

       }); 
      }, 

      slide: function (options) { 
       return this.each(function() { 

        var settings = { 
         'delay':  5000, 
         'direction': 'left', 
         'easing':  'swing', 
         'selector':  '*', 
         'transition': 3000 
        }, animation, property, value; 

        if (options) { 
         $.extend(settings, options); 
        } 

        switch (settings.direction) { 
        case 'left': 
         animation = {left: '-=' + $(this).width()}; 
         property = 'left'; 
         value = $(this).width(); 
         break; 
        case 'right': 
         animation = {left: '+=' + $(this).width()}; 
         property = 'right'; 
         value = 0; 
         break; 
        case 'up': 
         animation = {top: '-=' + $(this).height()}; 
         property = 'top'; 
         value = $(this).height(); 
         break; 
        case 'down': 
         animation = {top: '+=' + $(this).height()}; 
         property = 'top'; 
         value = 0; 
         break; 
        default: 
         jQuery.error('Direction ' + settings.direction + ' is not valid for jQuery.fn.cycle'); 
         break; 
        } 

        $(this).children(settings.selector + ':first-child').each(function() { 
         $(this).delay(settings.delay); 
         $(this).animate(
          animation, 
          settings.transition, 
          settings.easing, 
          function() { 
           $(this).css(property, value); 
          } 
         ); 
        }); 

        $(this).append($(this).children(settings.selector + ':first-child').detach()); 
        $(this).children(settings.selector + ':first-child').each(function() { 
         $(this).delay(settings.delay); 
         $(this).animate(
          animation, 
          settings.transition, 
          settings.easing, 
          function() { 
           $(this).parent().cycle('slide', settings); 
          } 
         ); 
        }); 
       }); 
      } 
     }; 

     jQuery.fn.cycle = function (method, options) { 
      if (methods[method]) { 
       return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
      } else if (typeof method === 'object' || !method) { 
       return methods.init.apply(this, arguments); 
      } else { 
       $.error('Method ' + method + ' does not exist on jQuery.fn.cycle'); 
      } 
     }; 
    }(jQuery)); 

    jQuery('.slider').cycle(); 

}); 

Answer 1

它實際上是一個CSS錯誤，而不是JavaScript/JQuery錯誤。我從來沒有把立場置於絕對。我在我鏈接的問題中更新了JavaScript，以反映最感興趣的版本。