jQuery的選項，以動畫

Question

我試圖寫一個jQuery插件，做一些動畫，但我想在通過動畫選項類似於下面的字符串：

(function ($) { 
    $.fn.animateBox = function (options) { 
     options = $.extend({ 
      animation: "backgroundColor: '#0E4839', padding: '10px', color: '#ffffff', fontSize: '153.846%', margin: '0 0 1em 0'" 
     }, options); 

     return $(this).each(function() { 
      var box = $(this); 
      box.animate({ options.animation }, 'slow'); 
     }); 
    }; 
})(jQuery); 

這是可能的，因爲上面是目前拋出一個錯誤，抱怨在options.animation點應該是一個分號（因爲它期望類似於backgroundColor: '#0E4839'）

Answer 1

您正在傳遞屬性作爲字符串，但jQuery的動畫需要一個對象。而且你不能用{}（一個對象字面值）替換一個變量。

因此最簡單的解決辦法是讓animation的對象，而不是字符串，所以它看起來是這樣的：

options = $.extend({ 
    animation: { 
    backgroundColor: '#0E4839', 
    padding: '10px', 
    color: '#ffffff', 
    fontSize: '153.846%', 
    margin: '0 0 1em 0' 
    } 
}, options); 

然後改變這一點：

box.animate({options.animation}, 'slow'); 

這樣：

box.animate(options.animation, 'slow');