Question

我想创建一个可自定义的jQuery模式，它可以进行动画制作（css颜色变化+淡入淡出），这是通过点击主html页面触发的。我知道如何将选项变量传递到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);
          }
        }; 
    });

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

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

（我知道这可能是一个基本的基本问题，但任何帮助都会受到赞赏！）

Answer 1

您可以在插件代码中尝试类似的内容：

首先将插件选项扩展为

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);

创建一个通过jquery插件动画的模态

1 个答案: