Erstellen Sie ein Modal, das über jQuery-Plugin animiert wird

Question

Ich möchte ein anpassbares jQuery-Modal erstellen, das animiert wird (CSS-Farbänderungen + Ein- und Ausblenden), das durch einen Klick auf die HTML-Hauptseite ausgelöst wird. Ich weiß, wie man Optionsvariablen in ein jquery-Plugin übergibt, aber ich bin mir nicht sicher, wie ich innerhalb des Plugins animieren soll. Zum Beispiel: mit Inline-jquery kann man einfach sagen:

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

Wie würde ich die gleichen Änderungen innerhalb eines Plugins machen kann? Hier ist ein Stück des Codes (versuchte Jeff Ways' jQuery-Plugin Tutorial zu verwenden:

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

ich nicht brauchen jemanden, dies für mich zu kodieren, ich möchte nur wissen, was ich falsch mache um diese gleichen Animationen passieren, dass es so einfach, während Inline ..

ich würde wirklich gerne machen, damit der Benutzer der Lage sein, auch verwenden Optionen wie benutzerdefinierte Breite oder Farbe.

(Ich weiß das vielleicht eine noob Grundfrage, aber jede Hilfe wäre willkommen!)

Answer 1

Sie können in Ihrem Plugin-Code so etwas wie dies versuchen:

Erste Plugin Optionen als

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

verlängern