0

我想创建一个可自定义的 jQuery 模态，通过单击主 html 页面触发进出动画（css 颜色更改 + 淡入和淡出）。我知道如何将选项变量传递给 jquery 插件，但我不确定如何在插件中设置动画。例如：使用内联 jquery 你可以说：

<script> $("#modal").animate({color: 'red', width: 300}).fadeIn('fast'); </script>

我如何能够在插件中进行这些相同的更改？这是一段代码（试图使用 Jeff Ways 的 jQuery 插件教程：

var mybigmodal= {
        init: function( options, elem) {
            var self = this;

            self.elem = elem;
            self.$elem = $( elem );

           if ( typeof options === 'string') {
                var w = 400;
                var h = 600;
           } else {
                //object was passed
                self.options = $.extend( {}, $.fn.mymodal.options, options)

          }

          self.mshow();
        },

        mshow: function() { //show the modal via animation?


          $('#lightbox-pane').fadeIn(50).animate({
              width: 50}, 150).animate({
                  width: 100},200);
          }
        }; 
    });

我不需要有人为我编写代码，我只是想知道我做错了什么，以便使这些相同的动画发生在内联时非常简单..

我真的很想让用户能够使用自定义宽度或颜色等选项。

（我知道这可能是一个新手基本问题，但任何帮助将不胜感激！）

4

1 回答 1

0

你可以在你的插件代码中尝试这样的事情：

首先将您的插件选项扩展为

var options = $.extend({
            height : "250",
            width : "500",
            color: "red",
            title:"Modal Box Demo",
            description: "Example of how to create a modal box.",
            top: "20%",
            left: "35%",

        },prop);


       $('#modal').animate({top:'toggle'},80);
于 2012-04-03T22:58:17.517 回答